Vue3.0 中 ref、reactive、toRef、toRefs、customRef的区别
1、ref（），reactive（） //定义vue2.0中data和method方法 2、setup（） //代替data和method返回数据和方法，在beforeCreate、created之前执行 3、toRefs（） //使用拓展用算符...的方法返回数据data
一、reactive
reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。
获取数据值的时候直接获取，不需要加.value
参数只能传入对象类型
等价于Vue2中的Vue.observable() ，来赋予对象(Object) 响应式的特性
import { reactive } from 'vue'
// 响应式状态
const state = reactive({
count: 0
})
// 打印count的值
console.log(state.count)
e.g2
reactive（）函数接收一个普通对象，返回一个响应式的数据对象。 基本语法 import {reactive}from "@vue/composition-api" //按需导入函数 const state=reactive({count:0}) //得到的state类似于vue2.x中date返回的响应式数据对象 在setup()函数中调用reactive（）函数创建响应式数据对象 setup{ const state=reactive({count:0}) return state //将响应式数据对象return出去供template使用 } 在template中访问 <P>当前count的值为{{count}}<P/>
二、ref
ref 用于为数据（基本的、复杂的都🉑️）添加响应式状态。由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref了，同样返回一个具有响应式状态的副本。
获取数据值的时候需要加.value。可以理解 为ref是通过reactive包装了一层 具有value属性的对象 实现的
参数可以传递任意数据类型，传递对象类型时 也能保持深度响应式，所以适用性更广。
vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。
相比于Vue2，用ref的好处就是传值时可以不用再写this。
import { ref } from 'vue'
// 为基本数据类型添加响应式状态
const name = ref('我是新变量')
// 为复杂数据类型添加响应式状态
const state = ref({
count: 0
})
// 打印name的值
console.log(name.value) // 我是新变量
// 打印count的值
console.log(state.value.count)
三、toRef
toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象 和 属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。
获取数据值的时候需要加.value
toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
import { defineComponent, toRef } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 创建变量myTitle
const myTitle = toRef(props, 'title')
console.log(myTitle.value)
}
})
四、toRefs
toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时 解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
获取数据值的时候需要加.value
toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值。
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
props: [title],
setup (props) {
// 使用了解构赋值语法创建了变量myTitle
const { myTitle } = toRefs(props)
console.log(myTitle.value)
}
})
五、customRef
(1) customRef 用于自定义返回一个ref对象,可以显式地 控制依赖追踪和触发响应, 接受工厂函数
(2) 两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象
import {customRef} from 'vue';
function useDebouncedRef(value) {
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
value2=newValue
trigger()
},
}
})
}
// ```
// 通过customRef返回的ref对象,和正常ref对象一样,通过x.value修改或读取值
