响应式的基本原理

[chenbj2333]

Object.defineProperty

学习自剖析 Vue.js 内部运行机制

在vue2.x中，是基于Object.defineProperty来实现响应式的。对于Object.defineProperty，可以参考具体可以参考 MDN 文档
简单的来说Object.defineProperty的使用方法如下：

/*
    obj: 目标对象
    prop: 需要操作的目标对象的属性名
    descriptor: 描述符
    
    return value 传入对象
*/
Object.defineProperty(obj, prop, descriptor)

这里，descriptor用到的属性包括以下四个：

• enumerable，属性是否可枚举，默认 false。
• configurable，属性是否可以被修改或者删除，默认 false。
• get，获取属性的方法。
• set，设置属性的方法。

下面来简单的实现一下：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    get: function reactiveGetter() { return val;},
    set: function reactiveSetter(newVal){
      if (newVal === val) return;
      // 渲染视图函数(newVal)
    }
  });
}

function observer(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
  Object.keys(value).forEach(key => {
    defineReactive(value, key, value[key])
  })
}
class Vue {
  constructor(obj) {
    this._data = obj.data;
    observer(this._data);
  }
}

let o = new Vue({data: {a: '123'}});
o._data.a = '345';

proxy