第一篇文章想写Vue的原因是刚买了一本《深入浅出 Vue.js 》,所以趁书没到,打算把Vue的文档重新看一遍(不得不赞Vue的文档,当年从Angular转Vue的时候看文档简直,舒服了~~)本文主要内容:
- 来源于Vue文档
- 你可能看过
- 但是你可能没用过
vue的数据响应失效了
你知道什么情况下,vue的数据响应会是失效吗?官方举了个例子:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
在日常的业务的处理中,尤其是数组的for循环渲染,当你使用完v-for之后,动态的通过操作index指定数组的值,不是响应的。 我们使用实际业务代码举个例子:
<template>
<div>
<div v-for="(item,key) in list" :key="key">
{
{
item}}
</div>
<button @click="changeList">失效</button>
<button @click="respondList">响应</button>
{
{
list}}
</div>
</template>
<script>
export default {
name: 'ex',
data () {
return {
list: [11, 12, {
money: 17 }]
}
},
methods: {
changeList () {
// 失效代码
this.list[0] = 16
this.list.length = 0
},
respondList () {
// 生效代码
this.list[2].money = 0
this.list[0] = 16
}
}
}
</script>
然后我们来看一下会发生什么:
这就很有意思了,我们可以看到这个过程中,执行changeList()方法,页面上的11并没有变成16且数组也没有变为空数组,但是执行第二个方法时,this.list已经为空数组,导致报错。也就验证了官网所说没错,我们不可以直接操作数组的item值,你想要的响应并不会发生。
但是!大家可能会发现,好像自己项目里经常有这种操作,但是没有发生这