Vue3中ref、reactive、toRef、toRefs基本用法和区别

ref、reactive

setup 函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想让变量变为响应式的变量，需要使用 ref 和 reactive 函数修饰变量。

区别：

• reactive只能传入对象类型的参数，所以基本数据类型添加响应式状态只能用ref（当然ref也可以定义复杂的数据）

• ref 获取数据值需要加.value

注：ref底层使用的是proxy代理函数实现双向绑定，proxy 函数必须要接收一个对象，如果想修改 name 的值，需要使用 name.value

toRef、toRefs

区别：

toRef：只希望转换一个reactive对象中的属性为ref，获取数据值需要加.value

toRefs：可以将reactive返回的对象中的属性都转成ref

注：toRefs 使用ES6的解构语法，因为一个响应式对象直接结构时，结构后的数据不再具有响应式，Vue为我们提供了一个toRefs的函数，可以将reactive返回的对象中的属性都转成ref；

toRef: toRef接收两个参数target和attr，target是一般是reactive的响应式对象，attr是对象的属性，返回响应式变量（采用引用的方式，修改响应式数据，会影响原始数据，并且数据发生改变）

import {reactive,toRef} from 'vue'
setup(){
    const obj = reactive({ name: "姜无忧", age: "18" })
    const name = toRef(obj, "name") 
    
    return {
       name 
    }
}

toRefs: 将响应式reactive对象转换为普通对象，多用于响应式对象转为普通对象后解构（对象中的数据依旧是响应式）

import {reactive,toRefs} from 'vue'
setup(){
    const obj = reactive({ name: "姜无忧", age: "18" })
    const {name,age} = toRefs(obj) 
    
    return {
       name,
       age 
    }
}

//或者
import {reactive,toRefs} from 'vue'
setup(){
    const obj = reactive({ name: "姜无忧", age: "18" })
    
    return {
      ...toRefs(obj)
    }
}