1 代码

<body>

   <div id="root">
    <h1>{{name}}</h1>
    <h1>{{obj}}</h1>

   </div>

   <script type="text/javascript" >

    let a = {
        name:'sisi'
    }

    const vm = new Vue({
        el:'#root',
        data:{
            name:a.name,
            obj:a
        }
    })

    </script>

</body>

 

2 页面

 

 

3 vm外层属性 _data属性 及vm外部变量

　　1）vm外层属性和_data属性的关系

　　　　可以看到vm外层的属性和_data里面的属性是相等的，因为外层的属性就是代理的_data的属性

　　2)_data属性的值使用的是vm以外的对象的话

　　　　值是一般数据类型：初始化的时候把值赋值给_data的属性了，后面两者可以说没有关系了

　　　　值是对象：初始化的时候把对象地址赋值给_data的属性了

 

 

4 测试1

　　初始化的时候，值全部是'sisi'

　　

 

 　　执行命令a.name='数学'

　　 结果：

　　　　a对象的name属性变化了

　　　　vm._data.obj.name 变化了，vm.obj.name变化了

　　　　vm.name没变化，vm._data.name没变化

 

 

5 测试2

　　刷新页面，初始化的时候，值全部是'sisi'

　　

　　执行命令vm.name='历史'

　　结果：

　　　　vm.name变化，vm._data.name变化

　　　　vm._data.obj.name 没变，vm.obj.name没变

　　　　a对象的name属性没变

　　

 

 

6 测试3

　　刷新页面，初始化的时候，值全部是'sisi'

　　

　　执行命令vm.obj.name='化学'

　　结果：

　　　　vm._data.obj.name 变了，vm.obj.name变了

　　　　a对象的name属性变了

　　　　vm.name没变，vm._data.name没变