我们希望能通过hvue的实例访问我$data中的属性(如:this.message),这时我们可以通知代码现实。
1、为HVue类添加proxyData方法
// hvue.js
class HVue {
proxyData(key) {
Object.defineProperty(this, key, {
get() {
return this.$data[key];
},
set(newVal) {
this.$data[key] = newVal
}
})
}
}
2、在HVue类observe方法中,添加this.proxyData(key)
// hvue.js
class HVue {
proxyData(key) {
Object.defineProperty(this, key, {
get() {
return this.$data[key];
},
set(newVal) {
this.$data[key] = newVal
}
})
}
}
到这里我们可以测试一下了
// index.html
<body>
<script src="./hvue.js"></script>
<script>
const app = new HVue({
data: {
message: 'hvue',
foo: {bar: ''}
}
})
app.$data.message = 'new message'
app.$data.foo.bar = 'new bar'
app.message = 'again update message'
</script>
</body>
看了三行日志,说明通过HVue实例,也能设置和访问$data的属性了