11 - vue 动态数据绑定实现原理

vue 的动态数据绑定，是利用 ES5 的对象的
Object.defineProperty() 的方法 [定义属性]，中的get 和set方法

一、defineProperty 基本用法

1、基本写法：

    var person= {};
    Object.defineProperty(person, "name", {
    value: '张三',
    })
    console.log(person.name); // 打印：张三

2、参数

一、参数
        第一个参数：要设置的目标对象（必填）
        第二个参数：需要定义的属性或方法的名称（必填）
        第三个参数：目标属性所拥有的特性,对象。（descriptor）（必填）

二、关于 descriptor 的属性：
         value: 属性的值
         writable：是否可写 -- 如果为false，属性的值就不能被重写, 只能为只读了
         configurable：总开关，一旦为false，就不能再设置他的（value，writable，configurable）
         enumerable：是否可枚举（是否能在for...in循环中遍历出来或在Object.keys中列举出来）
         set：改变值
         get：获取值

3、descriptor 参数的基本用法

1、默认值

writable、configurable、enumerable：默认值为 false

2、configurable

configurable：第一次设置 false后，
再次通过 defineProperty 设置其他值（value，writable，configurable）就会报错。

    var person= {};
    Object.defineProperty(person, "name", {
    value: '张三',
    configurable:false
    })

    Object.defineProperty(person, "name", {
    value: '李四',
    })

报错.png

3、writable

writable：设置false后，变为只读。

    var person= {};
    Object.defineProperty(person, "name", {
    value: '张三',
    configurable:false
    })
    console.log(person.name); // 打印：张三
    person.name = "李四";     // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）
    console.log(person.name)  // 打印：张三，赋值不起作用。

4、enumerable

enumerable：是否可枚举
（是否能在for...in循环中遍历出来或在Object.keys中列举出来）

    var person = {}; 
    Object.defineProperty(person, "name", { 
        　　value : '张三',
        　　enumerable: true
    　　}
    );
    console.log(Object.keys(person)); // true：打印 ["name"];  false：打印 []

5、get、set

1、set :更新数据；set：获取数据

2、在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会错，
  就是说想用 get 和 set，就不能用 writable 或 value 中的任何一个。

3、简单来说，赋值或者取值的时候会分别触发 set 和 get 对应的函数。

    var person= {};
    var temp = [];
    Object.defineProperty(person, 'name', {
    set: function(newVal) {
        temp['name'] = newVal;
        console.log('为person设置新的姓名：' + newVal);
    },
    get: function() {
        var _name =  temp['name'] || '默认姓名';
        console.log('获取person的姓名：' +  _name);
        return _name;
    }
    });
    person.name = '张三';      // 打印 获取person的姓名：张三
    console.log(person.name)  // 打印 获取person的姓名：张三(如果不设置name，这里会打印'默认姓名')

4、get 、set 动态绑定数据的例子：

参考链接：
https://www.cnblogs.com/lvmylife/p/7474374.html
https://blog.csdn.net/u014787301/article/details/52083218