vue2与vue3响应式原理介绍
vue2与vue3响应式原理介绍
文章目录
- vue2与vue3响应式原理介绍
- 概念
- 一、vue2响应式原理
- 代码展示
- 注:
- 二、 Vue3中的响应式原理
- 总结
概念
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
一、vue2响应式原理
通过 Object.defineProperty 遍历对象的每一个属性,把每一个属性变成一个 getter 和 setter 函数,读取属性的时候调用 getter,给属性赋值的时候就会调用 setter.
当运行 render 函数的时候,发现用到了响应式数据,这时候就会运行 getter 函数,然后 watcher(发布订阅)就会记录下来。当响应式数据发生变化的时候,就会调用 setter 函数,watcher 就会再记录下来这次的变化,然后通知 render 函数,数据发生了变化,然后就会重新运行 render 函数,重新生成虚拟 dom 树。
代码展示
通过添加后发现控制台打印了,但页面并未渲染
Vue.set 和 this. s e t 的关系 t h i s . set的关系 this. set的关系this.set 实例方法,该方法是全局方法 Vue.set 的一个别名
this.$set(this.person,‘sex’,‘男’)
Vue.set(this.person,‘sex’,‘男’)
注:
二、 Vue3中的响应式原理
实现原理:
通过Proxy(代理): 拦截对象中任意属性的变化,包括:属性值的读写,属性的增加,属性的删除等。
通过Reffect(反射): 对源对象的属性进行操作
new Proxy(data,{
//拦截读取属性值
get(target, prop){
return Reflect.get(target, prop)
},
//拦截设置属性值或添加新属性
set(target, prop, value){
return Reflect.set(target, prop, value)
},
//拦截删除属性
deleteProperty(target, prop){
return Reflect.deleteProperty(target, prop)
}
})
proxy
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量(保持不变的语义)。
const p = new Proxy(target, handler)
参数:
target:
要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler:
一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
Reffect
Reflect是一个组合的对象,它提供了阻止 JavaScript 操作的方法。Reflect不是一个函数对象,因此它是不可构造的。
在reffect身上,就有defineProperty()这个方法
const p = new Proxy(person, { //创建代理
// 查
get(target,propName){
console.log(`有人读取了p身上的${propName}`)
return target[propName];
//反射
return Reflect.get(target,propName)
},
// 改 增
set(target, propName, value){
console.log(`有人修改了p身上的${propName}属性`);
target[propName] = value;
},
// 删
deleteProperty(target, propName){
console.log(`有人删除了p身上的${propName}属性`)
return delete target[propName];
},
});
不管是通过p对象对person对象进行增删改查任意一种操作,都能监测到,同时数据也能得到更新,对比起Vue2来说,确实真正意义上实现了数据的完全式响应。
而在Vue3数据的更新是proxy配合Reffect来实现的,在上述代码中,我只展示了通过Reffect来读取属性值,剩下的都是原生的数代理。
总结
以上就是Vue3中数据想响应式的原理,在Vue2中,数据响应式主要借助Object.defineProperty()来实现,存在的缺陷是无法操作数据的增加和删除,在Vue3中,数据响应式主要借助proxy和Reffect配合实现,可以做到实现数据的增删改查。
CSDN-Ada助手: 推荐 CS入门 技能树:https://edu.csdn.net/skill/gml?utm_source=AI_act_gml