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没变