Vue 2.x – 数据代理

什么是数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

    <script>
        let obj = { x: 100 }
        let obj2 = { y: 200 }

        // 通过obj2能读到x且修改它
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },

            set(value) {
                obj.x = value
            }
        })
    </script>

Vue中的数据代理

    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '云淡风轻',
                address: '互联网'
            }
        })
    </script>

数据代理流程