17: VUE数据绑定 与 Object.defineProperty

　　VUE数据绑定原理：https://segmentfault.com/a/1190000006599500?utm_source=tag-newest

　　Object.defineProperty()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

 　　                                     http://www.javashuo.com/article/p-qasukviu-dp.html

1.1 Object.defineProperty()介绍

　　一、defineProperty做用

　　　　　　1. Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

　　二、语法：Object.defineProperty(obj, prop, descriptor)

　　　　1）参数说明：

　　　　　　　　obj： 必需。目标对象
　　　　　　　　prop： 必需。需定义或修改的属性的名字
　　　　　　　　descriptor： 必需。目标属性所拥有的特性

　　　　2）返回值：

　　　　　　　　传入函数的对象。即第一个参数obj

　　三、数据描述：

　　　　 做用：当修改或定义对象的某个属性的时候，给这个属性添加一些特性

　　　　1）设置的特性总结

 

　　　　　　　　value:    设置属性的值

　　　　　　　　writable:    值是否能够重写。true | false

　　　　　　　　enumerable:    目标属性是否能够被枚举。true | false

　　　　　　　　configurable:    目标属性是否能够被删除或是否能够再次修改特性 true | false

//一、任意建立一个对象obj
var obj = {
    test:"hello"
}
// 原始值 obj = {test: "hello"}


//二、修改obj "test"值为"test的新值"
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:'test的新值',
    writable:true | false
});
// 修改后 obj = {test: "test的新值"}


//三、对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:"newValue",
    writable:true | false
});
// 修改后 obj = {test: "test的新值", newKey: "newValue"}

使用defineProperty修改对象的值/添加新值

　　四、属性：value（对象新值）

//一、定义一个空对象obj
var obj = {}

//二、为新对象设置一个值 newKey : hello
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //hello

属性：value

　　五、属性：writable

　　　　  说明：属性的值是否能够被重写。设置为true能够被重写；设置为false，不能被重写。默认为false。

var obj = {}
//一、writable设置为false，不能重写。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});
//二、更改newKey的值,发现值并无修改
obj.newKey = "change value";
console.log( obj.newKey );  //hello

writable定义值是否能够被重写

　　六、属性：enumerable

　　　　 说明：设置为true能够被枚举；设置为false，不能被枚举。默认为false。 

var obj = {}

//一、enumerable设置为true，能够被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

//二、枚举对象的属性
for( var attr in obj ){
    console.log( attr );  //newKey
}

enumerable设置为可枚举类型

　　七、属性：configurable

　　　　1）做用

　　　　　　　　1. 目标属性是否可使用delete删除，目标属性是否能够再次设置特性

　　　　　　　　2. 设置为true能够被删除或能够从新设置特性；设置为false，不能被能够被删除或不能够从新设置特性。默认为false。

var obj = {}

//一、configurable设置为false，不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//二、删除属性：实际上没有被删除
delete obj.newKey;
console.log( obj.newKey ); //hello

configurable 设置是否能被删除、修改

　　八、getter/setter

　　　　　　1. getter 是一种得到属性值的方法，setter是一种设置属性值的方法。

　　　　　　2. 当使用了getter或setter方法，不容许使用writable和value这两个属性

　　　　　　3. get或set不是必须成对出现，任写其一就能够,若是不设置方法，则get和set的默认值为undefined

var obj = {};
var initValue = 'hello';

Object.defineProperty(obj,"newKey",{
    get:function (){
        return initValue;            //当获取值的时候触发的函数
    },
    set:function (value){
        initValue = value;        //当设置值的时候触发的函数,设置的新值经过参数value拿到
    }
});

//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

 1.2 vue实现数据绑定原理

　　  参考博客：https://segmentfault.com/a/1190000006599500?utm_source=tag-newest

　　一、vue使用数据劫持实现数据双向绑定

　　　　　　1. vue.js 采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter

　　　　　　2. 在数据变更时发布消息给订阅者，触发相应的监听回调。

　　二、数据劫持原理

　　　　　　一、实现一个数据监听器Observer，可以对数据对象的全部属性进行监听，若有变更可拿到最新值并通知订阅者

　　　　　　二、实现一个指令解析器Compile，对每一个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

　　　　　　三、实现一个Watcher，做为链接Observer和Compile的桥梁，可以订阅并收到每一个属性变更的通知，执行指令绑定的相应回调函数，从而更新视图

　　　　　　四、mvvm入口函数，整合以上三者

　　　　　　

　　三、第一步：实现Observer

　　　　　　1. 咱们知道能够利用Obeject.defineProperty()来监听属性变更

　　　　　　2. 那么将须要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

　　　　　　3. 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出全部属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            return val;
        },
        set: function(newVal) {
            console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
        }
    });
}

Observer 给对象添加setter、getter属性

　　　　　　4. 这样咱们已经能够监听每一个数据的变化了，那么监听到变化以后就是怎么通知订阅者了，因此接下来咱们须要实现一个消息订阅器

　　　　　　5. 很简单维护一个数组，用来收集订阅者，数据变更触发notify，再调用订阅者的update方法

/ ... 省略
function defineReactive(data, key, val) {
    var dep = new Dep();
    observe(val); // 监听子属性

    Object.defineProperty(data, key, {
        // ... 省略
        set: function(newVal) {
            if (val === newVal) return;
            console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
            dep.notify(); // 通知全部订阅者
        }
    });
}

function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

数据变化触发notify调用订阅者的update方法

 

 

 

 

 

 

 

11111111111111111