西安公司网站制作要多少钱/seo推广教程seo高级教程

更新修正------

在工作中进行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

修改后：

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')

}

}