2、Vue3 composition -- ref API

Vue Composition API 详解

• ref 将基本数据类型转成响应式对象，改变值通过.value
• isRef 判断是否ref对象

案例

<template>
  <div>
    {{msg}} == {{age}}
  </div>
  <button @click="btnclick">点击改变</button>
</template>

<script>
//
import { isRef, ref } from 'vue'

export default {
  name: 'index1',
  // setup生命周期
  setup(){
   // ref 等价在data中声明的变量
   // ref将基本类型的变量转化为响应式包装对象来使其具备响应式
   const msg = ref('张三');
   const age = ref(20);
   // 点击事件
   function btnclick(){
     // 通过.value改变变量数据
     age.value += 1;
   }
   // 判断msg是否为ref对象
   console.log('msg isRef', isRef(msg));
   // 返回对象才能进行响应式
   return { msg, age, btnclick };

    // const count = ref(0);
    // return () => (<div>{count.value}</div>);
  }
}
</script>