vue响应式

 先来看看Object.defineProperty 能干什么

var obj = {}
var name = 'zhangsan'
Object.defineProperty(obj, 'name', {
    get: function () { 
        console.log('get')
        return name
    },
    set: function (v) { 
        console.log('set')
        name = v
    }
})

console.log(obj.name)
obj.name = 'lisi'

控制台打印如图：

 

让我们来模拟Vue的响应式：

var mv = {}
var data = {
    name: 'hhh',
    age: 18
}

for(let key in data) {
    Object.defineProperty(mv, key, {
        get: function () {
            console.log('get')
            return data[key]
        },
        set: function (v) {
            console.log('set')
            data[key] = v
        }
    })
}

把data的属性代理到MV上，并且通过set和get来双向绑定，使数据驱动视图，也许set就够用了，为什么要用get呢，因为有时候data的属性在模板中没有用到，只是代码中一个变量而已，所以修改这个属性的时候，也不需要重新渲染页面，所以有get的属性，set的时候才会重新渲染，不然set不用理会这个变量