故事
在听B站课程并练习的时候发现这样一个小问题,
就像Vue的官方文档中所说的那样,对于数组,Vue只监测数组的七个方法
现在我们在data中声明了这样的一个数组,并在界面上展示
data() {
return {
actors:[
{ name:"Orion",sex:"Male" },
{ name:"Nancy",sex:"Female" }
]
}
}
当你想要修改这个列表的数据,并在控制台中用
vm._data.actors[1] = {name:"Chang",sex:"Male"}
或者在methods的update按钮点击事件中用
this.actors[1] = {name:"Chang",sex:"Male"}
去修改它的时候,你会发现其并未发生响应式的变化。
但是如果你恰好在update事件中修改了其他data中对象的数据,比如下面代码中的
this.roles.ro2 = "Penelop"
那么页面就会重新渲染,我们上面对列表的操作也随之更新到页面上。这对于初学者来说是具有迷惑性的。不过尽管如此,这也为数组中的数据进行响应式的更新提供了一种方法。
方法
针对更新数组数据的情况,我们还可以用以下的方法:
1.依次更新数组元素的属性
this.actors[1].name = "Change"
this.actors[1].sex = "Male"
2.通过Vue.set方法
Vue.set(this.actors,1,{name:"Chang",sex:"Male"})
没错 set方法是可以用到数组上的
代码
下面晒出完整的代码
<body>
<div id="app">
<h1>{{ game }}</h1>
<h2>{{ author }}</h2>
<h3>Roles</h3>
<ul v-for="role in roles">
<li>😀{{ role }} </li>
</ul>
<h3>Actor</h3>
<ul v-for="actor in actors">
<li>😎{{actor.name}}</li>
</ul>
<button @click="update">Update</button>
<!-- 注意 v-for 是可以用于数组或者对象的 -->
</div>
<!-- Vue时如何检测数据的改变的 -->
<script type="text/javascript" src="../1.Hello/js/vue.js"></script>
<script>
const vm = new Vue({
data() {
return {
game:"Eternum",
author:"Caribdis",
roles:{
ro1:"Orion",
ro2:"Annie"
},
actors:[
{ name:"Orion",sex:"Male" },
{ name:"Nancy",sex:"Female" }
]
}
},
methods: {
// 当你在控制台中输入vm._data.modules.tl[0]="Janpanese"的时候
// 页面上的展示没有即时响应 就像下面最后这一句的赋值一样
// 但是如果你调用了第一句 或者是 vm._data.actors[0].name="Penelope"的时候 整个页面都会刷新
// 总结 只要是调用了 data中数据中任意的一个set 方法(不管嵌套了几层) 都会引起整个页面的更新
update(){
// this.roles.ro2 = "Penelop"
// 在控制台用这个 vm._data.musics[1] = "Kill the light" 为什么和下面的不一样
// this.actors[1].name = 'Chang'
this.actors[1] = {name:"Chang",sex:"Male"}
},
},
})
vm.$mount("#app")
</script>
</body>
下面附上课程链接