Vue watch数组赋值时,第一次不触发更新watch现象解决方法(修正)
更新修正------在工作中进行Vue框架使用中,总是会遇见数组不触发更新问题,因此在原来的基础上添加了官网上的代码和评论补充的代码。官网中提到两种情况(数组更新无法触发):# 由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:v...
·
更新修正------
在工作中进行Vue框架使用中,总是会遇见数组不触发更新问题,因此在原来的基础上添加了官网上的代码和评论补充的代码。
官网中提到两种情况(数组更新无法触发):
# 由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
//官网代码
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
1. 解决第一类问题vm.items[indexOfItem] = newValue
//解决第一类问题有两种方法和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
// 1. Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// 2. Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue) //修改原数组
// 3. vm.$set 是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
2. 解决第二类问题vm.items.length = newLength
// splice
vm.items.splice(newLength)
3. 原文修改(新方法添加比对)
要求每一次数组的变化都触发数组更新(watch 触发)
//这是原来的错误(?啰嗦麻烦)的栗子
watch:{
"list"(){
console.log("触发数组变化")
},
}
methods中:
change(){
for(let i=0;i<this.list.length;i++){
this.list[i] = "11111"; // 直接用this.list[i]=1 不会触发数组更新
this.$set(this.list, this.list[i], "11111")// 后两个参数与上一句效果相同
}
console.log(this.list);
},
修改后:
data: {
list:['2',3,4,5]
},
watch:{
// 评论提到的首次加载 数组触发
'list':{
immediate: true, // immediate选项可以开启首次赋值监听
handler(newVal, oldVal) {
console.log(newVal, oldVal)
console.log("触发数组更改")
}
},
},
methods:{
//除了fill方法外,每一个语句都能触发更新watch
change(){
//this.list.splice(7);
//this.list.fill("0") //数组初始化(用新语法代替for循环)
//this.list.splice(1,1,'sdadasdada')
//Vue.set(this.list,0,'22322424')
this.$set(this.list,1,'22322424')
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)