网站网页转小程序教程,仿站建设,网站服务器哪个好,浙江最近爆发的传染病Vue能够对用户的数据进行响应式#xff0c;也就是你在data中写了什么#xff0c;你在模板中用到data的部分就会渲染成什么#xff0c;那么Vue是怎么知道用户修改了data中的数据变化并对模板重新进行解析的呢#xff1f;
在Vue将数据存储为自身的_data之前#xff0c;Vue会…Vue能够对用户的数据进行响应式也就是你在data中写了什么你在模板中用到data的部分就会渲染成什么那么Vue是怎么知道用户修改了data中的数据变化并对模板重新进行解析的呢
在Vue将数据存储为自身的_data之前Vue会将数据进行处理主要用到的仍然是数据代理通过修改一个对象中的属性触发getter和setter进行设置。
如果不清楚数据代理的流程可以参考这篇文章https://blog.csdn.net/XunLin233/article/details/133714989
一、Vue监测对象的修改
我们使用数据代理的方式对p对象中的name属性进行数据代理
const p {name:张三,age:18
}Object.defineProperty(p, name, {get() {return p.name;},set(value) {p.namevalue;}
})
但是我们按照上面的写法进行数据的读取和修改的时候就会报错
03.html:18 Uncaught RangeError: Maximum call stack size exceeded 为什么会产生这个原因呢
当我们读取name属性时就会调用get函数get函数中又读取name属性又调用get函数...如此无限套娃就报错了。 如何解决上面问题呢
既然不能通过对象本身去修改属性值那我们就借助其他的对象来对属性值进行修改然后返回这个将所有属性修改后的对象其核心思想就是为每一个对象属性设置getter和setter。
我们可以使用构造函数的this为一个对象中添加属性
const p {name:张三,age:18
}function Observer(obj) {// 获取对象所有的属性名const keys Object.keys(obj);// 对对象的每个属性进行遍历keys.forEach((k){// 这里的this是Observe对象所有修改后的属性都添加在了Observe对象身上console.log(this); // Observer {}Object.defineProperty(this, k, {// 添加getter 和 setterget() {return obj[k];},set(value) {console.log(数据被修改了);obj[k] value;}})})
}
const newp new Observer(p); // 创建Observe对象
console.log(newp); Vue的底层逻辑就是通过上述方法监视数据的修改但是Vue源码能够监视更深层次的数据修改如 对象中存储对象的形式。 二、Vue.$set()
当我们想给一个对象添加新的属性时我们该怎么做呢
例如下面的代码在data中有一个person对象里面有name和age属性但是我们想添加再添加一个age属性 当我们在vm._data上的person对象添加sex 时并没有用 如果我们打开vm._data的话会发现name和age都有get和set只有sex没有说明Vue并没有几监视添加的sex对象。 Vue提供了 Vue.$set() 方法来进行对象的添加属性 Vue.$set( 目标对象, 属性名称, 属性值 ) 我们使用该方法添加的属性拥有数据代理 在代码中可以直接使用this.$set进行调用 注意Vue.$set() 不能在data上直接添加属性 报错vue.js:5108 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 三、Vue检测数组的修改
我们使用v-for遍历一个数组 现在我们想将数组中下标为0的元素改为“篮球”,但是我们修改过后页面并没有改变 如果我们输出vm._data 会发现数组中的每一个元素都没有getter和setter因此Vue不能检测数据的变化。 那我们要怎样去改变数组呢
Vue规定使用如下方法修改数组能够被监测到修改 push() pop() shift() unshift() splice() sort() reverse() 要注意的是上面这些方法是Vue重新包装过的方法不再是原来Array对象上的方法 Vue的包装过程不仅调用原始Array中的方法还对页面模板重新进行了解析。
