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;将对象的多个属性变成响应式数据,并且要求响应式数据和原始数据关联,且更新响应式数据时不会更新页面,用于批量设置多个数据为响应式。