首页 > 其他 > 详细

Vue知识总结

时间:2018-06-25 00:49:34      阅读:225      评论:0      收藏:0      [点我收藏+]

响应式

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知识总结

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!