MVVM基础，实现vue双向绑定功能

    <div id="box"></div>
    <script>
        // 1/数据
        let model = {
            name: "张四",
            age: 11
        }

        //3 /viewmodel 
        Object.keys(model).forEach(item => observer(model, item, model[item]))		//把数据进行遍历，然后把新值放入下列函数中
        function observer(target, key, value) {
            Object.defineProperty(target, key, {
                get() {
                    //监听对象属性的访问
                    return value	
                },
                set(newval) {
                    //监听对象属性的修改,可传入新值
                    value = newval
                    watch()
                }
            })
        }

        function watch() {
            rander()
        }

        // 2、视图
        function rander() {
            box.innerHTML = `
                <span>${model.name}</span>
                <button οnclick="btn()">点我</button>
            `
        }
        rander()

        function btn() {
            model.name = "小王八"
        }
    </script>
=======================ES6--MVVM=================================
ES6新增了proxy，进行了优化，vue3进行采用，vue2还是使用的循环
 <div id="box"></div>
    <script>
        // ES6 劫持 vue3使用
        // 1/数据
        let model = {       //定义数据
                name: "张三",
                age: 13,
                sex: "男"
            }
              // 3、viewmodel 视图模型
        // 3-1.监听对象属性的变化
        let newModel = new Proxy(model, {       //新变量接收值,传入变量
                get(target, key) {          //一个是数据 一个是键名
                    //监听对象属性的访问
                    console.log("属性被访问");
                    return target[key]      //获取到键值
                },
                set(target, key, value) {       //数据。键名。键值
                    //监听对象属性的修改
                    console.log("属性被修改了");
                    target[key] = value         //键值=传入进去的新值
                    watch()                 //进行监听渲染
                }
            })
            //3-2.自动更新视图观察者
        function watch() {          //监听数据
            render()
        }
            // 2、视图
        function render() {     //定义视图数据函数
            box.innerHTML = `
                    <span>${model.name}</span>
                    <span>${model.age}</span>
                    <span>${model.sex}</span>
                    <button οnclick="btn()">点击</button>
                `
        }
        render()        //进行渲染

        function btn() {        //点击事件改变其值(这里是改变新值)
            newModel.name = "张四"
            newModel.age = 31
            newModel.sex = "女"
        }
      
    </script>