vue 源码学习一： 了解Object.defineProperty

Object.defineProperty是 ECMAScript5.1中定义的参数。旨在监听一个对象改变时的值。

Object.defineProperty(obj, prop, descriptor)

obj: 监听对象

prop: 监听对象的属性

descriptor: {
    configurable: false ,  
    enumerable: false,
    writable: false,
    value: null ,
    set: Function, // 带改变值 若没有为undefined
    get: Function //若没有为undefined

}

• configurable属性是否可配置，可配置的含义包括（是否可以删除属性），是否可以修改属性writable 、 enumerable 、 

• enumerable, 属性是否可以枚举，可枚举的含义 ： 是否可以通过for ... in 遍历到，是否可以通过Object.keys()方法获取属性名称。

• writable,属性是否可以重写，是否可以对属性重新赋值。

• value, 属性的默认值

• set, 属性的 重写方法， 一旦属性被改变，此方法自动调用

• get, 属性的 读取方法, 一旦属性被访问读取，此方法自动被调用

简单示例

html代码

  <div>
        <input type='text' placeholder="请输入用户名" onInput="textChange(event)" />
        输入结果：
        <p id="result"></p>   
    </div> 

js 代码

        let res = {
            value: ''
        };
        let result = {
            value: ''
        };
        function textChange( e ){
            res.value = e.target.value;
            document.querySelector('#result').innerHTML = result.value;// 触发的是 get这个函数
        }
        Object.defineProperty(res,'value', {
            get: ( ) => {
                return result.value;
            },
            set:( val ) => {
                result.value = val;
            }
        });

这样就基本上了解了这个函数了。若有什么错误的地方，还望指出。