Vue11 vue的data中属性的值(基础数据类型和对象)

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

巴特西

Vue11 vue的data中属性的值(基础数据类型和对象)

最新文章

热门文章