最近项目有点忙碌，遇到好多问题都没有总结(╥﹏╥)，在开发过程中，取vuex中的数组渲染完成之后，再次修改数组的值，数据更新了，但是视图并没有更新。以为是数组更新的问题，后来又以为是因为vuex导致的问题. 最后强制刷新组件解决了问题，但是还没有找到根本问题的所在...
数组更新检测
- 在 vue 中使用数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法时，改变数组的同时可以触发视图的变化。
- 注意： 有两种情况 vue 无法检测到变动的数组，分别是：
（1）直接操作数组的长度；
// Vue.set this.$set(arr, indexOfItem, newValue) // Array.prototype.splice this.arr.splice(indexOfItem, 1, newValue)
(2)利用索引直接设置一个项时，例如：this.arr[indexOfItem] = newValue
this.arr.splice(newLength)
demo如下：
<template>
<div class="demo">
<div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div>
<div class="change-btn" @click="changeArr">改变列表的值</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
arr: [{
elements: [{
name: '0'
}, {
name: '1'
}, {
name: '2'
}]
}]
}
},
methods: {
changeArr() {
// 可以改变数组的值
this.arr[0].elements.push({
name: '3'
})
// this.arr[0].elements[1].name = '4' 可以改变数组的值
// this.arr[0].elements[1] = { 无法改变数组的值
// name: '4'
// }
}
}
}
</script>
问题： 用v-for循环渲染数组数据时，数据更新了，视图却没有更新
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength
解决方法：
为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue) （数组， 所引， 值） // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue) （所引， 长度， 值）
避免第二种情况，使用 splice：
example1.items.splice(newLength)
对象更新检测
方法一：this.$set()
方法二：Object.assign()
demo.vue
<template>
<div class="demo">
{{object}}
<div class="change-btn" @click="changeArr">改变列表的值</div>
</div>
</template>
<script>
export default {
data() {
return {
index: 0,
object: {
name: 'haha'
}
}
},
methods: {
changeArr() {
// 方法一：
this.$set(this.object, 'age', 27)
// 方法二：
this.object = Object.assign({}, this.object, {
age: 27
})
// 方法三： ---不可行
this.object.age = '27'
}
}
}
</script>
补充：
this.$forceUpdate()迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
使用 v-if 在切换时，元素及它的绑定数据和组件都会被销毁并重建
参考文献
https://cn.vuejs.org/v2/api/#vm-forceUpdate
https://cn.vuejs.org/v2/guide/list.html?#
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。