响应式原理

红叶何时落水

响应式指的是当我们修改一个变量时，会有某些操作可以自动进行。

比较典型的便是Vue框架中的实例数据一旦发生变化，便会自动更新到视图层。

<div id="red">{{name}}</div>
<script>
    var app = new Vue({
        el: '#red',
        data: {
            name: '红叶',
            age: 19,
        }
    })
    app.name = "落水";
</script>

当name发生改变时，div标签中的内容会由“红叶”变成“落水”；

其核心在于利用Object.defineProperty的set与get方法

    let o = {};
    let value;
    Object.defineProperty(o, 'newatrr', {
        configurable: true,
        enumerable: true, // 可枚举
        get() { // 如果使用 o.newatrr 来访问数据, 就会调用 get 方法 ( getter, 读取器 )
            return value;
        },
        set(newVal) { // 如果 o.newatrr = 'xxx', 那么就会调用 这个 set 方法, 并设置的值会最为参数传入 set
            value = newVal;
        }
    });

可以在set函数里设置当 属性值发生改变时，我们希望系统可以自动进行的操作。在Vue里，set函数一旦执行，就会触发render()函数，对vnode里的绑定值进行比较，替换，并更新到视图层。

其中临时变量value是get与set函数的桥梁，两个函数对value进行修改与读取。但这种写法并不够规范，可以进行闭包处理。

<div id="red">{{name}}</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#red',
        data: {
            name: '红叶',
            age: 19,
        }
    })
    app.name = "落水";

    function defineReactive( target, key, value, enumerable ) {
      // 函数内部就是一个局部作用域, 这个 value 就只在函数内使用的变量 ( 闭包 )
      Object.defineProperty( target, key, {
        configurable: true,
        enumerable: !!enumerable,//"!!"可以将该值转化为布尔值
        get () {
          return value;
        },
        set ( newVal ) {
          value = newVal;
        }
      } )
    }

    // 将对象转换为响应式的
    let keys = Object.keys( app._data );
    for ( let i = 0; i < keys.length; i++ ) {
      defineReactive( app._data, keys[ i ], app._data[ keys[ i ] ], true );
    }

</script>

在defineReactive()中，参数value是该属性的临时变量，只有调用defineReactive()的那个属性可以访问，避免了不同属性的value作用域污染。

另外，

{configurable: true,

enumerable: !!enumerable,}

{value : "original",

writable : false,} 

这两个属性成对出现；

writable : false,不可以与get与set同时设置，否则会报错。