本篇文章在阐述ref和reactive之前我们可以先回顾一下vue中响应式的实现方式:
在阐述这个问题之前,我们先回顾一下什么是数据代理:
数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data
选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty
把这些 property 全部转为:getter / setter
vue2中实现代理的方式是通过数据劫持来实现的,也就是使用的Object.defineProperty,所以它的底层就是使用 getter 和 setter
Vue中响应式的实现方式:
Vue2:
1. 在vue2中的响应式是通过 defineProperty
实现的 【defineProperty 定义属性】
所以Object.defineProperty()
的作用就是用于定义一个对象的属性
Object.defineProperty(obj, prop, desc)
// obj 需要定义属性的当前对象
// prop 当前需要定义的属性名
// desc 属性描述符
Object.defineProperty(obj,"name4",{
value:"dd",
writable: false // value属性值默认是只读的
})
这边 Object.defineProperty 实现vue2的响应式就是通过get和set 进行实现的。这里没有进行什么赘述,想要了解的可以自己下去查一下。
Vue3:
在vue3中的响应式是通过ES6的Proxy 来实现的,什么是Proxy 哪? 英文上面的释义是 代理
那么这个Proxy 和我们今天所要讲述的ref 和reactive 有什么联系呐?
Proxy 用于创建一个对象的代理,从而实现基本操作的拦截和自定义
响应式的底层原理都是Proxy,Vue3中有两个重要的数据响应式监听方法:ref 和 日reactive,这两个方法都通过Proxy来实现的:
在下面对ref 和reactive的阐述中会进行说明:
ref函数
ref函数的作用是定义一个响应式的数据
语法: const xxx=ref(initValue)
创建一个包含响应式数据的引用对象 (reference对象 简称ref对象)
① 在ref函数中接收的对象可以是基本类型的,也可以是对象类型的,如果是对象类型的那么它的底层还是调用了 reactive
② 当我们在模板中访问ref中的数据的时候,系统会自动帮我们添加.value
reactive 函数
- reactive的参数一般是对象或者数组,他能够将复杂数据类型变为响应式数据。
- reactive的响应式是深层次的,底层本质是将传入的数据转换为Proxy对象
小tips:
使用reactive定义数据时,会先进行判断定义的数据是否是对象,是对象的话才会继续进行数据响应式的处理,反之就直接被return出来了。