Vue知识总结

Posted 2020-11-20 fuguy

响应式

Object.defineProperty

Object.defineProperty(obj, prop, descriptor)  // 对象、属性、描述符

　　Object.defineProperty是es5新加的给对象属性设置描述符的方法,可以用来监听属性值的变化

 var obj ={};
    var _name =‘张三‘
    Object.defineProperty(obj,‘name‘,{
        get:function () {
            return _name;
        },
        set:function (value) {
            _name=value;
        }
    })

　　调用方式:

obj.name ="里斯";
alert(obj.name);

模拟Vue响应式

 var vm= {};
    var data= {
        items: [
            { message: ‘Foo‘ },
            { message: ‘Bar‘ }
        ]
    };
    var i;
    for (i in data){
        if(data.hasOwnProperty(i)){
            (function(i){ // 独立函数作用域
                Object.defineProperty(vm,i,{ //将data对象的属性代理到vm
                    get: function () {
                        return data[i];
                    },
                    set:function (newVal) {
                        data[i]=newVal;
                    }
                })
            }(i))
        }
    }
    vm.items[0].message=‘张三‘
    console.log(vm.items);