Object.defineProperty方法在vue中的关键地位

Vue.js中重要的数据监听及响应的核心就是Object.defineProperty方法

var vm = new Vue({
    el:"#app",
    data:{
        name:"zhangsan"
    }
})

在Vue.js中，通常是直接通过vm.name来操作数据，而不是vm.data.name,因为该方法将data对象代理到了vm上，实现了对数据的劫持，达到能够监听数据变动的目的。

    <div id="app">
        <ul>
            <li id="name"></li>
        </ul>
    </div>

    <script>
        var vm = {}
        var data = {
            age:100,
            name:"zhangsan"
        }

        let key

        for(key in data) {
            (function(){
                // 将data对象的属性key代理到vm对象上，并且监听该属性值的变化
                Object.defineProperty(vm,key,{
                    get() {
                        return document.querySelector("#name").innerHTML
                    },
                    set(newVal){
                        document.querySelector("#name").innerHTML  = newVal
                    }
                })
            })(key)
        }
        vm.name = "lisi"
    </script>