脚本宝典收集整理的这篇文章主要介绍了vue2与vue3响应式原理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
1、$set 、$delete
2、静默刷新
3、proxy
4、Reflect
vue2的响应式原理是通过object.defineProperty来劫持各个属性的setter和getter在数据发生变化的时候发布消息给订阅者,触发响应的监听回调。这里不再对vue2响应原理做过多解释,可以查看往期博客
在vue2中通过object.defineProperty实现响应式原理时新增属性、删除属性界面不会更新;直接通过下标修改数组,界面也不会自动更新(vue2也做了相对解决$set,$delete);下面来具体介绍$set、$delete和静默刷新
语法:
- vm.$set("被设置的对象" , "属性/索引" , "值")
- vm.$delete("被设置的对象" , "属性/索引")
下面看看直接添加、删除对象属性(代码仅供测试,可忽略)
<template> <div> <p>姓名:{{obj.name}}</p> <p>年龄:{{obj.age}}</p> <p>性别:{{obj.sex}}</p> <button @click="addSex">添加性别sex</button> <button @click="delAge">删除年龄age</button> </div> </template> <script> export default { name: "", data() { return { obj:{ name:'zs', age:20 } }; }, created() {}, computed: {}, methods: { addSex(){ this.obj.sex = '男' console.log("添加性别sex",this.obj); }, delAge(){ delete this.obj.age console.log("删除年龄age",this.obj); } }, }; </script> <style lang="less" scoped></style>
可发现对象的sex属性被添加了,age属性被删除了,但是数据未被响应,界面没有更新
可以看出数据的变化会影响到界面的更新
addSex() {
this.flag = false;
this.obj.sex = "男"; //不是响应式
//this.$set(this.obj, "sex", "男"); //是响应式
console.log("添加性别sex", this.obj);
this.flag = true;
},
delAge() {
this.flag = false;
delete this.obj.age; //不是响应式
//this.$delete(this.obj, "age"); //是响应式
console.log("删除年龄age", this.obj);
this.flag = true;
},
可以看出静默刷新利用v-if重新加载节点实现响应刷新页面数据,这样面对大量添加的属性和未知属性也是比较方便的
语法:const p = new proxy("新对象" , "函数对象")
下面看看vue3的新增和删除属性会不会实现界面刷新
<template> <div> <p>姓名:{{ obj.name }}</p> <p>年龄:{{ obj.age }}</p> <p>性别:{{ obj.sex }}</p> <button @click="addSex">添加性别sex</button> <button @click="delAge">删除年龄age</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "HelloWorld", setup() { let obj = reactive({ name: "zs", age: 20, }); function addSex() { obj.sex = "男"; console.log("添加性别sex", this.obj); } function delAge() { delete obj.age; console.log("删除年龄age", this.obj); } return { obj, addSex, delAge, }; }, }; </script> <style scoped></style>
可以看出vue3中对象属性的增加和删除,界面会随之更新,这是因为vue2的响应式为object.defineProperty而vue3是proxy搭配Reflect
//因为proxy就两个参数,所以怎么判断是哪个属性呢 const p = new Proxy(obj, { get(target, prop) { //target:对象 prop:属性 console.log("get:", target, prop); return prop; }, set(target, prop, value) { //target:对象 prop:属性 value:新的值 console.log("set:", target, prop, value); return true; }, deleteProperty(target, prop) { //删除 console.log("delete:", target, prop); return delete target[prop]; }, });
接下来将代码进行优化
<template> <div> <p>姓名:{{ obj.name }}</p> <p>年龄:{{ obj.age }}</p> <p>性别:{{ obj.sex }}</p> <button @click="putAge">修改年龄</button> <button @click="getName">读取姓名</button> <button @click="delSex">删除性别</button> <button @click="addClass">增加班级</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "HelloWorld", setup() { let obj = reactive({ name: "zs", age: 20, sex: "男", }); const p = new Proxy(obj, { get(target, prop) { console.log("get:", target, prop); return prop; }, set(target, prop, value) { target[prop] = value; console.log("set:", target, prop, value); console.log("有人修改了", prop); return true; }, deleteProperty(target, prop) { console.log("delete:", target, prop); console.log("有人删除了", prop); return delete target[prop]; }, }); function putAge() { p.age = 18; } function getName() { console.log("有人读取了", p.name); } function delSex() { delete p.sex; } function addClass() { p.class = "www"; //增加对象属性调用的是set } return { obj, putAge, getName, delSex, addClass, }; }, }; </script> <style scoped></style>
下面做一下总结:
- 获取属性调用proxy中的get函数
- 修改和新增调用proxy中的set函数
- 删除调用的 proxy中的deleteProperty函数
而vue3中proxy是和Reflect搭配着使用的,下面来简单介绍下Reflect
Reflect直译为映射,官方解释它是一个内置对象,提供拦截js操作的方法,这些方法与proxy handlers的方法相同,Reflect不是一个函数对象,因此它是不可构造的,它的所有属性和方法都是静态的(和Math一样),下面将代码进行改进一下
<template> <div> <p>姓名:{{ obj.name }}</p> <p>年龄:{{ obj.age }}</p> <p>性别:{{ obj.sex }}</p> <p>班级:{{ obj.class }}</p> <button @click="putAge">修改年龄</button> <button @click="getName">读取姓名</button> <button @click="delSex">删除性别</button> <button @click="addClass">增加班级</button> </div> </template> <script> import { reactive } from "vue"; export default { name: "HelloWorld", setup() { let obj = reactive({ name: "zs", age: 20, sex: "男", }); const p = new Proxy(obj, { get(target, prop) { console.log("get:", target, prop); return Reflect.get(target, prop); }, set(target, prop, value) { target[prop] = value; console.log("set:", target, prop, value); console.log("有人修改了", prop); return Reflect.set(target, prop, value); }, deleteProperty(target, prop) { console.log("delete:", target, prop); console.log("有人删除了", prop); return Reflect.deleteProperty(target, prop); }, }); function putAge() { p.age = 18; } function getName() { console.log("有人读取了", p.name); } function delSex() { delete p.sex; } function addClass() { p.class = "www"; } return { obj, putAge, getName, delSex, addClass, }; }, }; </script> <style scoped></style>
那Reflect有什么特点和好处呢?
- 将object对象的一些明显属于语言内部的方法(比如object.defineProperty),放到Reflect对象上,现阶段,某些方法同时在object和Reflect对象上部署,未来的新方法只部署在Reflect对象上,也就是说Reflect可以拿到内部方法
- 修改object方法的返回结果,比如object.defineProperty在无法定义属性时会抛出错误,可用try{...}catch{...}来捕获错误消息,而Reflect直接会返回false
- 让object操作都变成函数行为,某些object操作是命令式的,Reflect会将其变成函数式
- Reflect方法跟Proxy对象的方法是对应的,Proxy的方法在Reflect都能找到,尽管修改了Proxy默认行为,Reflect也是能够获取默认行为的
以上总结参考程序思维
总结:
以上是脚本宝典为你收集整理的vue2与vue3响应式原理全部内容,希望文章能够帮你解决vue2与vue3响应式原理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。