阅读 24

vue学习记录之响应式原理

Vue官网介绍其是一款用于构建用户界面的渐进式框架,易于上手,使用于可以专注于视图层的开发。
复制代码

之前因为项目需求,接触了Vue2.0,不得不说,vue的响应性系统能及时将变化后的节后快速渲染到页面,极大提高了开发效率。下面来说说Vue的响应式原理:

image.png 上图是Vue官网提供的实现响应的过程图: Vue遍历一个Vue实例对象的data对象的所有property,使用 Object.defineProperty将所有property 全部转为 getter/setter,每个组件实例都对应一个 watcher 实例,它可以用于监听setter的触发,将变化后的结果渲染到组件上。 不过,需要特别说明的是,Vue 不能检测数组和对象的变化,但我们可以通过Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。另外为了一次性向对象添加多个属性,官网提供了用原对象与要混合进去的对象的 property 一起创建一个新的对象,例子如下:

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
复制代码

而对于数组,也可以通过Vue.set来更新对应索引位置的值来实现数据响应。

文章分类
前端
文章标签