Vue3为什么推荐使用ref而不是reactive - 知乎 

用ref还是reactive定义变量？

vue官方文档「基础-响应式基础」原文：由于reactive的局限性，我们建议使用 ref() 作为声明响应式状态的主要 API。 

ref需要写丑陋的.value

reactive有时候重新赋值会丢失响应

将变量都存在objdata对象里用reactive，前面得写objdata.

所以没有最优解

那就推荐：ref一把梭

//一般来说，我们使用 ref 来定义基本数据类型，使用 reactive 来定义复杂数据类型

let data = reactive({name:""})  我们可以对reactive 定义出来的data随便往里面添加删除属性，并且它任然是响应式的 例如 data.age = 18; data.fullName = computed(()=>{return '李四'})

当我们给ref传递一个值之后，ref函数底层会自动将ref转换成reactive; ref(18) => reactive({value:18})

reactive里面参数定义必须是对象或者数组(json/arr)

//在VUE3中
//请求传参
getDetail(id.value).then(res=>{}) //ref
payOrderStatus(state.orderNo).then(res=>{}) //reactive
 
<div>{{num}}</div> //123
<p>{{ ruleform.username }}</p> //du
<p>{{password}}</p> //b123
<input type="text" v-model="inputVal" @input="inputFn">
import {ref,reactive,toRefs,computed,watch,onMounted} from 'vue'
 
//setup：因为在执行setup时还没有执行created所以不能使用data和methods，
//setup是处于beforecreated和created生命周期之间的所以不能使用。
//setup:是Composition API 的入口。
 
setup(){
//第一种写法 可以用ref()形式,通过定义ref变量把普通的变量变成了响应式变量
    
注意:1、通过ref定义变量，在用到变量的时候必须通过num.value去取,
     2、定义的变量必须return返回出去，这样才能在template中渲染出来
    let num = ref(123);//number
    const str1 = ref(''); //string
    let refOnoff = ref(false);//boolean
    let refstr = ref(null); //null
    let refOnoff = ref(undefined);//undefined
    const arr2 = ref([1, 2, 3]); //数组
    const obj3 = ref({ a: 1 }); //对象
    str1.value = "444"; //赋值
    arr2.value = [3, 4, 5];
    const data = reactive({
        name:"a1",
        ruleform: {
            username: "du",
        },
        inputVal:""
    })
    data.name = "huang";//reactive赋值
    data.ruleform["username"] = "lisi"; //赋值 或者 data.ruleform.username = "lisi"
    console.log(data.ruleform["username"]);

    //第二种写法可以用reactive的形式，必须先引入reactive再使用   
    const obj = reactive({})
    const arr = reactive([])
    const state = reactive({
        name:"du",
        count:123,
        ruleform: {
            username: "du",
        },
        add:()=>{data.name===''},
        computed:(()=>{return data.count++})
    })
    const userinfo = reactive({
        email:"",
        password:"a123",
    }) 
    data.ruleform["username"] = "lisi"; //赋值 或者 data.ruleform.username = "lisi"
    userinfo.password = "b123";
    const inputFn =(val)=>{
      console.log(data.inputVal)
    }
    //toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据
    return{
        num,
        name,
        add,
        computed,
        inputFn, 
        ...toRefs(data), //在页面上就可以直接绑定 name,count 而不用data.name
        ...data,//也可以直接绑定name,count 但不是响应式数据
        ...toRefs(userinfo),
    }


//方法+赋值
setup(){
    const handleClick = ()=>{
        str1.value = "444";
        data.name = 'du';
    }
    //定义的变量和方法必须return返回出去
    return{
        handleClick
    }
}

toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据