vue2以下版本（defineProperties）
<div id="root">
<span id="count"></span><button onclick="increaseCount()">+</button>
</div>
<script>
//定义一个中间值用于过渡
let y = 10 ;
//事先定义了一个对象
const obj ={};
//使用Object.defineProperty来为obj定义一个X的值
Object.defineProperty(obj, 'x' , {
//每次调用了obj.x，get()这个方法都会自动的执行，他return的值就是定义的中间值
get(){
return y ;
},
//每次使用obj.x = 某个值 ；都会自动调用set()方法，set方法的参数就是你是使用时候的 “某个值”
set(ves) {
//将某个值重新赋值给中间值
y = ves ;
//这是重新渲染页面的方法
render();
}
})
//点击事件，让每次的obj.x加1并重新赋值
function increaseCount(){
//这里将会自动的调用get方法与set方法
obj.x = obj.x + 1 ;
}
//页面渲染的方法
function render() {
document.querySelector("#count").innerHTML = y;
}
render();
</script>
vue3版本（peoxy）
var p = new Proxy(target, handler);
var handler = {
get: function(obj, prop) {
return prop in obj ?
obj[prop] :
37;
}
};
p.a = 1;
p.b = undefined;
var target = {};
//example实时渲染的实例模板
<div id="root">
<span id="count"></span><button onclick="increaseCount()">+</button>
</div>
<script>
const obj = new Proxy({},{
set(obj, prop, value){
obj[prop] = value ;
rend();
},
get(obj, prop){
return obj[prop];
}
})
obj.prop =10;
function increaseCount() {
obj.prop = obj.prop + 1 ;
}
function rend(){
document.querySelector("#count").innerHTML = obj.prop ;
}
rend();
</script>
