首先我们要清楚vue是双向绑定数据,通过object.defineProperty()的访问器属性getter、setter数据劫持结合发布订阅模式,来完成数据双向绑定。
<style>
<div id="box"></div>
</style>
<script>
// 定义一个div
let oBox = documnet.getElementById('box');
// 定义一个对象
const obj = {
msg: '默认值'
};
function upDate(val) {
console.log(val); // 默认值
oBox.innerHTML = val;
};
upDate(obj.msg);
Object.defineProperty(obj, 'msg', {
get() {
return this._msg;
},
set(newVal) {
upDate(newVal);
this._msg = newVal;
}
});
</script>
点击去查看object.defineProperty()
现在可以在控制台输入obj.msg = ‘xxx’,这时候页面上的值就会随之改变。
好了,下班了,拜拜。?