先来看看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不用理会这个变量