码迷,mamicode.com
首页 > 其他好文 > 详细

Vue知识总结

时间:2018-06-25 01:09:54      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:des   模拟   script   函数   div   TE   ons   class   pre   

响应式

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);

  

  

Vue知识总结

标签:des   模拟   script   函数   div   TE   ons   class   pre   

原文地址:https://www.cnblogs.com/fuGuy/p/9222249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!