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>