Vue响应式原理深入解析

阳光穿透心脏的1/2处 2021-12-24 11:11 357阅读 0赞

Vue最明显的特性之一便是响应式系统，其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时，视图便会进行响应操作。

**响应式data：**

<div id = "exp">{
        { message }}</div>
    const vm = new Vue({
     el: '#exp',
     data: {
     message: 'This is A'
     }
    })
    vm.message = 'This is B' // 响应式
    vm._message = 'This is C' // 非响应式

上述代码中，data是Vue实例的数据对象，当实例初始化时，Vue 会遍历 data 中的所有属性，并且使用 [Object.definePropery ][Object.definePropery]把这些属性全都转为 getter/setter ，从而让 data 的属性能够响应数据变化。另外，Object.defineProperty 是 ES5 中一个无法 shim(垫片) 的特性。对象必须是纯粹的对象 (含有零个或多个的 key/value 键值对)：浏览器 API 创建的原生对象。所以，在data中声明过的message是响应式数据，而由于\_message是在data外使用 Vue 实例增加的数据，所以亦不属于响应式。

**关于Object.definePropery**

`Object.defineProperty()`方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。它是实现响应式数据的关键所在。

obj: 要定义属性的对象

prop: 要定义或修改的属性的名称

descriptor: 将被定义或修改的属性描述符。

注：要知道ECMAScript中有两种属性：数据属性和访问器属性。这里的descriptor可取值有数据属性和访问器属性。

数据属性： 包含一个数据值的位置，在此位置可以进行读写操作，有以下特性：

\[\[Configurable\]\]：对属性的操作可配置性开关，如删除，修改。默认值为true。

\[\[Enumberble\]\]：是否可枚举（通过for-in）。默认值为true。

\[\[Writable\]\]：能否修改属性的值。默认值为true。

\[\[value\]\]：包含这个属性的数据值，读取时从该位置读，写入时把新值存到该位置。默认值为undefined。

访问器属性： 不包含数据值，包含一个函数对（getter/setter）。特性如下：

\[\[Configurable\]\]：对属性的操作可配置性开关，如删除，修改。默认值为true。

\[\[Enumberble\]\]：是否可枚举（通过for-in）。默认值为true。

\[\[Get\]\]：读取属性时调用的函数。默认值为undefined。

\[\[Set\]\]：写入属性时调用的函数。默认值为undefined。

注：在读取访问器属性时，就会调用getter函数，该函数负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，该函数负责决定如何处理数据，但是这两个函数不一定非要同时存在。Vue便是利用getter/setter这一特性来实现的响应系统。

示例：

// 定义一个book对象，_year和edition都属于数据属性。
    var book = {
     _year : 2004,
     edition : 1
    };
    // 对book对象创建 year 访问器属性。
    Object.defineProperty(book, "year",{ 
     // 读取 year 访问器属性时，get() 方法返回 _year 的值。
     get : function () {
     console.info(this._year, 'get'); // 2004
     return this._year;
     },
     // 写入 year 访问器属性时，set() 方法对新值进行操作。
     set : function (newValue) {
     if (newValue > 2004) {
     this._year = newValue;
     console.info(this._year, 'set') // 2005 
     this.edition += newValue - 2004;
     }
     }
    });
    // 读取 year 访问器属性时会返回_year的值。
    book.year;
    // 写入 year 访问器属性时会调用set() 函数，进行操作。
    book.year = 2005; 
    console.info(book.edition) // 2
    console.info(book)

**watcher：**

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

注：模板中每个指令/数据绑定都有一个对应的 watcher 对象。其中 watcher扮演的角色相当于纽带，这个纽带的作用就是收集依赖。

**变化检测**

1·Vue不能检测对象属性的添加或删除，因此属性必须在data对象上，但是可以使用`Vue.set(Object,key,value)`来将响应属性添加到对象上 （`vm.$set` 实例方法`Vue.set`全局方法）。

2.使用(`Object.assign()`或者`_.extend()` )方法添加属性，不会触发更新，这时建议使用`oldobject=Object.assign({},oldobject,{key1:value1,key2:value2})`

3.Vue不允许动态添加 根级响应式属性，所有初始实例必须声明（空值也需要）

4.在数据变化之后立即使用 `vm.$nextTick(calllback)` 实现在Dom更新后操作

转载于:https://www.cnblogs.com/thinkwea/p/10933028.html

[Object.definePropery]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty