【vue3】ref和reactive的区别及选用

ref和reactive函数都是用来定义响应式数据；但是reactive更适合定义复杂数据类型（json、arr数组）、ref适合定义基本数据类型（可接收基本数据类型和对象）；

ref

• 函数参数可以是基本数据类型，也可以接受对象类型
• 如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成：

ref(1) -> reactive({value:1})

ref函数只能操作浅层次数据，把基本数据类型当作自己的属性值，深层次依赖于reactive

• 在template中访问，系统会自动添加.value；在js中则需要手动.value
• ref响应式原理是依赖于Object.defineProperty()的get()和set()

ref定义的数据打印结果需要.value才能获取到结果，而reactive则不需要。

本质上，可以理解为ref对reactive的二次包装，ref定义的数据访问的时候要多一个.value；

reactive

• 它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy。
• 参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦。需要使用toRefs

ref、toRef、toRefs的区别

• ref：复制，修改响应数据不影响以前的数据；数据改变，界面自动更新
• toRef:引用，修改响应式数据会影响以前的数据；数据改变，界面不自动更新
• toRefs：接收一个对象作为参数，它会便利对象身上所有属性，然后调用单个toRef；将对象的多个属性变成响应式数据，并且要求响应式数据和原始数据关联，且更新响应式数据时不会更新页面，用于批量设置多个数据为响应式。