https://blog.csdn.net/zifeiyu130/article/details/78950244
vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：
1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到[/b]
[quote]数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以[/quote]
Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测：
[list].push()
[list].pop()
[list].shift()
[list].unshift()
[list].splice()
[list].sort()
[list].reverse()
vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
[list].filter(), [list].concat(), [list].slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
[/list]
Vue 不能检测以下变动的数组：
[list]
[list]① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
[list]② 当你修改数组的长度时，例如： vm.items.length = newLength
[/list]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{ name }}<br>
年龄：{{age}}<br>
说明：{{info.content}}
数组长度: {{list.length}}
<!--<div>
性别：{{sex}}<br>
{{info.a}} </div>-->
<p>
<div v-for="(item, index) in list" :key="`${index}`">
<span>{{item.name}}</span>
<span>{{item.age}} </span>
</div>
<button @click="add">click</button>
<button @click="add1">click1</button>
<button @click="add3">click3</button>
<button @click="add4">click4</button>
<button @click="add5">click5</button>
</p>
</div>
<script>
var data = {
name: "简书",
age: '3',
info: {
content: 'my name is test'
},
list: [{
name: 'zhangsan',
age: 10
}, {
name: 'lisi',
age: 21
}, {
name: 'wangwu',
age: 22
}, {
name: 'wangwu',
age: 22
}
]
}
var vm = new Vue({
el:'#app',
data: data,
methods: {
// 当点击事件触发时候会修改掉gc[0]的值为lisi,但是视图不会发生变化
add() {
this.list[0] = {
name: 'dlsfsdfasdfasdf',
age: 22222222222222
}
},
add1() {
// this.list[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到
Vue.set(this.list, 0, {
name: 'kkkkkkkkkkkkkk',
age: 33333333333
}) //这样就能被vue监控到，更新视图
},
add3() {
this.list.push({
name: 'dlsfsdfasdfasdf',
age: 22222222222222
})
},
add4() {
this.$set(this.list, 0, {
name: 'mmmmmmmmmmmm',
age: 44444444444444444
})
},
add5() {
this.list.length =10;
// TypeError: Cannot read property 'name' of undefined
// 报错
},
ready: function () {
// 没有成功
//Vue.set(data, 'sex', '男');
//this.$set('info.a' + key, 'what is this?');
}
}
});
</script>
</body>
</html>
网友评论