实现一个简单的类 Vue 框架（二） —— 数据的绑定之修改可监听的数据绑定方法

Vue是MVVM框架，也就是M（数据）的变化能够驱动V（模板）的变化，所以数据修改可响应的实现是一个关键点。实现数据变化可响应的方法很多，事件驱动，广播，订阅等方法，而Vue使用的是js的原生API  Object.defineProperty。这种实现方法的优点是：实现简单。缺点是：只能兼容到IE9以上。

 

针对上一篇文章：https://blog.csdn.net/SunShinessx/article/details/90293626，本篇用Object.defineProperty实现修改可监听的数据驱动：

/* 修改可监听的数据绑定 */
function Sue(options) {
    initData(this,options)
    if (typeof options.ready === 'function') {
        options.ready.call(this)
    }
}

function initData (vm,options) {
    var data = options.data;
    data = typeof data === 'function' ? data() : data || {};
    for (let key in data) {
        if (data.hasOwnProperty(key)) {
            let value = data[key]
           Object.defineProperty(vm,key,{
               enumerable: true,
               configurable: true,
               get() {
                   console.log(`get ${key}`);
                   return value
               },
               set(newVal) {
                   if(value !== newVal){
                       value = newVal
                       console.log(`set ${key}`);
                   }
               }
           })
        }
    }
}

var sue =  new Sue({
    data(){
        return {
            name:'ssx',
            age:18
        }
    },
    ready(){
        console.log("name",this.name);
        console.log("age",this.age);
        this.name = 'lili'
        this.age = 19
    }
})
console.log(sue.name);
console.log(sue.age);

存在的问题：如果data是一个对象，对对象的修改将不能监听到。

解决方法：遍历data对象，然后对data对象的属性也做 Object.defineProperty处理。

/* 修改可监听的数据绑定---data的属性是对象 */
function Sue(options) {
    initData(this,options)
    if (typeof options.ready === 'function') {
        options.ready.call(this)
    }
}

function initData (vm,options) {
    var data = options.data;
    data = typeof data === 'function' ? data() : data || {};
    _each(vm,data)
}

function _each(obj,sourceObj) {
    bindData(obj,sourceObj)
    for (let key in sourceObj) {
        if(typeof sourceObj[key] == 'object'){
            bindData(sourceObj[key],sourceObj[key])
        }

    }
}

function bindData(obj,sourceObj) {
    for (let key in sourceObj) {
        if (sourceObj.hasOwnProperty(key)) {
            let value = sourceObj[key]
            Object.defineProperty(obj,key,{
                enumerable: true,
                configurable: true,
                get() {
                    console.log(`get ${key}`);
                    return value
                },
                set(newVal) {
                    if(value !== newVal){
                        value = newVal
                        console.log(`set ${key}`);
                    }
                }
            })
        }
    }
}

var sue =  new Sue({
    data(){
        return {
            info:{
                name:'ssx',
                age:18
            }
        }
    },
    ready(){
        console.log("name",this.info.name);
        console.log("age",this.info.age);
        this.info.name = 'lili'
        this.info.age = 19
    }
})

存在问题：如果info的属性在开发过程中新增加了，是不能检测到的。

解决方法：vue.$set方法就是解决这个问的。简化后的$set方法可以这样实现：

/* 修改可监听的数据绑定---data对象属性随意增加也可以监听到 */
function Sue(options) {
    this.initData(this,options)
    if (typeof options.ready === 'function') {
        options.ready.call(this)
    }
}

Sue.prototype = {
    constructor:Sue,
    $set(obj,key,value){
        Object.defineProperty(obj,key,{
            enumerable: true,
            configurable: true,
            get() {
                console.log(`get ${key}`);
                return value
            },
            set(newVal) {
                if(value !== newVal){
                    value = newVal
                    console.log(`set ${key}`);
                }
            }
        })
    },
    initData (vm,options) {
    var data = options.data;
    data = typeof data === 'function' ? data() : data || {};
    this._each(vm,data)
},
    _each(obj,sourceObj) {
        this.bindData(obj,sourceObj)
        for (let key in sourceObj) {
            if(typeof sourceObj[key] == 'object'){
                this.bindData(sourceObj[key],sourceObj[key])
            }

        }
    },
    bindData(obj,sourceObj) {
        for (let key in sourceObj) {
            if (sourceObj.hasOwnProperty(key)) {
                let value = sourceObj[key]
                Object.defineProperty(obj,key,{
                    enumerable: true,
                    configurable: true,
                    get() {
                        console.log(`get ${key}`);
                        return value
                    },
                    set(newVal) {
                        if(value !== newVal){
                            value = newVal
                            console.log(`set ${key}`);
                        }
                    }
                })
            }
        }
    }
}


var sue =  new Sue({
    data(){
        return {
            info:{
                name:'ssx',
                age:18
            }
        }
    },
    ready(){
        console.log("name",this.info.name);
        console.log("age",this.info.age);
        this.info.name = 'lili'
        this.info.age = 19
    }
})
sue.$set(sue.info,'school','福大')
console.log("school",sue.info.school)