艾迪网络专业的网站建设公司,wordpress 无插件主题,WordPress高级微信机器人,规划设计导航网站前言#xff1a;此处响应式指的是数据响应式变化#xff0c;而不是页面的响应式布局#xff0c;页面的响应式布局在我的其他文章中有提到。 一、什么是vue响应式
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们… 前言此处响应式指的是数据响应式变化而不是页面的响应式布局页面的响应式布局在我的其他文章中有提到。 一、什么是vue响应式
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时视图会随即自动更新。
二、vue2的响应式原理
2.1 官方解释
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项Vue 将遍历此对象所有的 property并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
2.2 大白话解释
Vue在组件和实例初始化的时候会将data()里的数据进行数据劫持即使用object.definepropty对数据做处理。被劫持处理过后的数据会有两个方法一个叫getter一个叫setter。
getter是使用数据的时候触发setter是在修改数据的时候触发触发setter的同时也触发了底层的watcher监听通知dom修改刷新。
2.3 数组的响应式 对于对象会遍历它所有的属性然后使用Object.defineProperty重写get、set方法对对象的每个属性进行劫持。如果属性值还是对象则会进行递归。 对于数组也会遍历它所有的元素然后使用Object.defineProperty方法对每个元素进行劫持。然后还会重写数组原型上push、pop、shift、unshift、sort、reverse、splice七个方法。
对于数组本身并没有像对象一样使用Object.defineProperty对自身和下标重写get、set方法。这也就导致了我们直接通过下标赋新值或直接删除值是不能响应式。(为了性能考虑 Vue2 直接弃用了使用 Object.defineProperty 对数组进行监听的方案)
注意 对于数组我们不要以为通过下标修改数据就一定不能响应式如果数组元素是引用数据类型恰巧只需要修改该引用数据类型某属性是可以直接通过下标更改的。 因为前面说了虽然数组并没有像对象一样使用Object.defineProperty对自身和下标重写get、set方法但是它会遍历它所有的元素然后使用Object.defineProperty方法对每个元素进行劫持。所以我们更改某引用数据类型的某属性是可以响应式的
例如
{data() {return {arr: [123, {name: 张三}]}},methods: {updateArr(){this.arr[1][name] 李四 // 这样是可以响应式的}}
}2.4 特别备注
由于vue2使用Object.defineProperty方法会重写get、set方法提前将数据进行劫持。这也就导致了在后面给对象添加新属性和直接删除属性是(删除不会触发set方法)不能响应式。即它只对初始对象的属性有监听作用 鱿鱼须也知道有这个缺陷提供了$set/$delete来帮助我们达到响应式。
2.5 文章
vue2的响应式原理官方文档 getter/setter的使用方法
三、vue3的响应式原理
3.1 官方解释
在 Vue 3 中则使用了 Proxy 来创建响应式对象仅将getter / setter 用于 ref。
3.2 大白话解释
Proxy 是 JavaScript 2015 的一个新特性。 Proxy 的代理是针对整个对象的而不是对象的某个属性因此不同于 Object.defineProperty 的必须遍历对象每个属性 Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化包括属性值的读写属性的增加属性的删除等当然对于深层结构递归还是需要进行的。此外 Proxy支持代理数组的变化。
Proxy 本质上属于元编程非破坏性数据劫持在原对象的基础上进行了功能的衍生而又不影响原对象符合松耦合高内聚的设计理念。
3.3 特别备注
在IE11以下的浏览器都不兼容所以如果使用 Vue3 开发一个单页应用的项目需要考虑到兼容性问题需要我们做额外的很多操作才能使得IE11 以下的版本能够兼容。
3.4 文章
vue3的响应式原理官方文档 ES6的proxy代理的使用方法
四、常见响应式问题
4.1 vue2中数据改变但是视图未更新
1、Vue.set()或this.$set()
对于已经创建的实例Vue 不允许动态添加根级别的响应式 property。但是可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如
Vue.set(vm.someObject, b, 2);
this.$set(this.someObject,b,2);2、this.$forceUpdate()强制刷新数据
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件而不是所有子组件。
3、Object.assign()解决vue2中对象新增属性不是响应式问题
有时你可能需要为已有对象赋值多个新 property比如使用 Object.assign()或 _.extend()。但是这样添加到对象上的新 property 不会触发更新。在这种情况下你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。 将源对象和要加入属性的对象合并为一个新的对象赋值给要响应式的对象源对象vue会将源对象重新触发一遍Object.defineProperty依赖收集。
this.msg Object.assign({}, this.msg, { age: 18 }); //响应式未完待续…
