目录
Vue的响应式效果:
我们知道,当Vue的实例对象中的data元素发生改变时,页面中用到该元素的地方会进行重新解析模板。即更改数据会影响页面的显示。但对 数组元素中的元素 通过数组下标的形式进行更改时,页面不会进行响应式变化。即:
<div id="root">
<button @click="changehobby">将第一个爱好改为打游戏</button>
<ul>
<li v-for="h in hobby">{
{h}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
hobby: ['吃饭', '睡觉', '打豆豆']
},
methods: {
changehobby() {
this.hobby[0] = '打游戏'
}
}
})
</script>
当按下按钮时,页面不会响应式地将 “吃饭” 改为 “打游戏”,但通过控制台我们可以发现,在hobby数组内部已经进行了修改。
但我们将该数组以对象的形式储存时会发现,页面又会正常进行响应式变化。
<div id="root">
<button @click="changehobby">将第一个爱好改为打游戏</button>
<ul>
<li v-for="h in hobby">{
{h}}</li>
&l