vue2和vue3响应式的原理
vue2和vue3响应式的原理
·
vue2
原理:在vue2中利用的是原生js下边的Object.defineProperty()进行数据劫持,在通过里面的getter和setter方法,进行查看和数据的修改,通过发布、订阅者模式进行数据与视图的响应式。
1.定义初始数据
2.加工数据:为了实现响应式,在javascript中Object.defineProperty()给每个初始数据都形成了get和set的写法,只要读取数据就会执行get方法,编辑数据执行set方法。
(1)、 定义响应式数据
(2)、get 查看age属性 执行get
(3)、set 修改数据的时候调用set
(4)、当数据发生变化时 触发响应的监听回调(get/set),就已经实现了数据的双向绑定.
3、vue2双向绑定的缺点
(1)、不能监听对象的新增属性和删除属性
(2)、无法正确的监听数组的方法,当监听的下标对应的数据发生改变时
4、解决方法
(1)、重写数组或者对象
(2)、vue中 通过this.$set(目前属性,新增的属性,新增的值)来解决 注 括号是三个参数
vue3
基本原理:
1、对于基本数据类型来说,响应式依然是靠Object.defineProperty()的get和set来完成的
2、对于对象类型的数据:
- 通过Proxy代理:拦截对象中任意属性的变化,包括属性值得读写、添加、删除等操作等..
- 通过Reflect反射函数进行操作
vue3中响应式是通过函数来实现的
1.ref函数
- 作用:定义一个响应式数据
- 语法:let xxx = ref(xxx)
- 创建一个包含响应式数据的引用对象
- js中操作数据:xxx.value
- 模板中读取数据:不需要 .value 直接使用插值语法即可
- 注:接收的数据可以是基本类型也可以是对象类型
2.reactive函数
1、作用:定义一个对象类型的响应式数据(基本数据类型 最好用ref函数)
2、语法:const xxx = reactive(源对象)接收一个数组或者对象,返回一个Proxy的实例对象,简称Proxy对象
返回proxy对象
- reactive定义的响应式的数据是深层次的
- 接受的是数组,通过索引改变的数据也是响应式的
更多推荐
已为社区贡献1条内容
所有评论(0)