源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Vue中的数据代理</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
                1.Vue中的 数据代理：
                            通过 vm对象 来代理 data对象中属性 的操作（读/写）
                2.Vue中数据代理 的 好处：
                            更加方便的操作data中的数据
                3.基本原理：
                            通过Object.defineProperty()把data对象中所有属性添加到vm上。
                            为每一个添加到vm上的属性，都指定一个getter/setter。
                            在getter/setter内部去操作（读/写）data中对应的属性。
         -->
        <!-- 准备好一个容器-->
        <div id="root">
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        //创建Vue实例 给 变量vm
        /*const vm = new Vue({
            el:'#root',

            //对应 Vue实例对象中的 _data属性。
            //Vue实例对象中的_data就是此处的data：
            //写法1: 把 data 直接写在 Vue()对象中
            data:{
                name:'尚硅谷',
                address:'宏福科技园'
            }
        })*/

        //写法2: 把 data 写在Vue()外面，定义为一个全局变量，然后把 data作为参数传递到 Vue()中。 该方法可以在浏览器控制台直接验证: vm._data === data 返回true的写法。
        let data = {
            name:'尚硅谷',
            address:'宏福科技园'
        }
        const vm = new Vue({
            el:'#root',
            //Vue实例对象中的_data就是此处传递的data(也就是上面定义的全局对象data{})，即：vm._data = options.data = data
            data
        })

    </script>
</html>
数据代理图示

013_Vue中的数据代理 - 图1