JS问题整理与思考--Vue三要素之响应式

之前有一篇针对defineProperty的使用

  • 什么是响应式

    修改data属性后,vue立即监听到

    data属性被代理到vm上

模拟实现响应式

var vm = new Vue({
    el:'#app',
    data:{
        name:'zhangsan',
        age:22
    }
})
var vm = {}
var data = {
    name: 'zhangsan',
    age:20
}
var key, value;
for (key in data){
    (function (key) {
        Object.defineProperty(vm,key,{
            get:function () {
                console.log('get调用')
                return data[key]
            },
            set:function (newVal) {
                console.log('set调用')
                data[key] = newVal
            }
        })
    })(key)
}

关键是理解Object.defineProperty

将data的属性代理到VM上

随机浏览