Vue3中的ref和reactive的应用
前言:ref和reactive是干什么用?就是把数据变成「响应式」的
Vue3中实现数据响应式,用到的是组合式API中的
ref
和reactive
函数,不同的是ref
函数一般定义基本类型数据,而reactive
函数用于定义一个对象类型的响应式数据。
Vue2和Vue3中的响应式
vue2的响应式是通过Object.defineProperty(数据劫持)方法,针对对象和数组有两种处理:
- 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
- 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
ref函数
作用: 定义一个响应式的数据
语法:
const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
- JS中操作数据:
xxx.value
,因为ref
接收参数并将其包裹在一个带有value
property 的对象中返回 - 模板中读取数据: 不需要.value,直接:
<div>{{xxx}}</div>
- 本质上,ref(0) 等于 reactive( { value:0 })
使用事项
- 使用ref包装之后,需要使用.value才行进行取值和赋值操作。这就导致一个结,就是在对象起属性名时,尽可能避开有value的属性名。因为会引起混淆。
- 响应式对象里面如果有ref包装的值类型。则Vue会实现自动拆箱,即获取值的方式是object.property,而不是object.property.value,注意:只有响应式对象会是这样,响应式数组或者Map都不能这样。
- 接受的数据可以是:基本类型,也可以是对象类型,基础类型靠Object.defineProperty()的get与set完成响应式,对象类型则是靠reactive函数进行辅助
使用案例
1 | import { ref, reactive, toRef } from 'vue' |
改变A,要用.value来改变
1 | A.value = 'Alice' |
使用ref来声明对象类型时候:
1 | const C = ref({ |
reactive函数
- 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用
ref
函数) - 语法:const 代理对象= reactive(源对象)
使用事项
- 接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
- js中操作不需要.value(与ref区别)
- reactive定义的响应式数据是“深层次的”。
- 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。
- 可以使用toRef(obj)为对象中的每一个属性创建一个ref,它可以保持对原属性的响应式链接,类似于浅拷贝。
*
ref和reactive的区别
- ref定义对象,在js中使用时都应该.value,如果定义的对象嵌套太深,再多一层.value太冗余,而reactive则无需.value
- ref定义对象类型数据,里边使用的也是reactive中的Proxy代理,不如直接使用reactive
- reactive不能直接定义基本类型数据,不起作用,可以将基本类型数据整体放入一个对象中,将reactive当作Vue2中的data去使用
- ref存在异步问题
使用案例
1 | const B = reactive({ |
1 | import { ref, reactive, toRef } from 'vue' |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 AliveSeven's Blog!
评论