Vue响应式原理深入解析及注意事项(2)

  • [[Set]]:写入属性时调用的函数。默认值为undefined。
  • Tips: 在读取访问器属性时,就会调用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 重新计算,从而致使它关联的组件得以更新。

    如下图所示:

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

    变化检测

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

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

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

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

    内容版权声明:除非注明,否则皆为本站原创文章。

    转载注明出处:http://www.heiqu.com/1234.html