Vue不能检测到Object/Array更新的情况的解决

前言 看文档不认真，开发也没有多注意，总是hack。忽悠忽悠就过去，但怎么说，歪门邪道还是不太好，现在就亡羊补牢，总结总结。 数组 索引 使用下标更新数组元素； 使用赋值方式改变数组长度； 使用下标增删数组元素； 正文 使用下标更新数组元素 data: { arrs: [0, 1, 2, 3] } 直接使用this.arrs[0] = 'zero';虽然数组确实是被更新了，但是更新不会被渲染到视图（html页面）上。因为Vue没有检测到数组的更新。 由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.it 在Vue.js框架中，开发者可能会遇到Vue无法检测到对象(Object)和数组(Array)更新的问题，导致视图未能正确同步。这是由于JavaScript的限制，Vue不能直接检测到某些特定的数组和对象变动。本文将深入探讨这个问题，并提供官方推荐的解决策略。 让我们关注数组的更新问题。Vue在处理数组时，有几种常见的更新方式不会触发视图更新： 1. **使用下标更新数组元素**：如`this.arrs[0] = 'zero';`虽然实际修改了数组，但Vue不会感知到这种变化，因此视图不会更新。 2. **使用赋值方式改变数组长度**：如`this.arrs.length = 100;`这种操作不会生效，Vue不会响应数组长度的直接修改。 3. **使用下标增删数组元素**：例如`this.arrs[this.arrs.length] = this.arrs.length;`这种操作同样无效。 为了解决这些问题，Vue提供了以下官方推荐的方法： - **Vue.set(target, key, value)**：例如`Vue.set(this.arrs, 0, 'zero');`，此方法可以确保Vue追踪到新属性并触发视图更新。 - **使用`splice()`方法**：对于数组长度的修改，可以使用`splice()`来插入或移除元素，如`this.arrs.splice(0, 1, 'zero')`；对于数组长度的增加，可以使用`splice(newLength)`来清除多余元素，如`this.arrs.splice(100)`。 - **使用数组的变异方法**：Vue可以监听到`push()`、`pop()`、`shift()`、`unshift()`、`splice()`、`sort()`和`reverse()`这些方法，因此可以使用它们来更新数组并确保视图同步。 接着，我们来看对象的更新问题。当尝试增加或删除对象的属性时，如`this.foo.job = 'coder';`或`delete this.foo.name;`，Vue同样无法检测到这些变化。解决方法如下： - **Vue.set(object, property, value)**：用于新增属性，例如`Vue.set(this.foo, 'job', 'coder');` - **Vue.delete(object, property)**：用于删除属性，例如`Vue.delete(this.foo, 'name');` 需要注意的是，对于数组，`filter()`、`concat()`和`slice()`方法会返回新的数组，而不是直接在原数组上进行修改，所以它们不会触发Vue的响应式更新。如果需要保持响应性，可以使用这些方法后将结果赋值回原始数组。 Vue在处理数组替换时，比如用新数组替换旧数组，如`this.arrs = this.arrs.concat(this.arrs.length);`，Vue会智能地重用DOM元素，因此这种操作通常很高效。 Vue.js框架对于对象和数组的响应式更新有其特定的规则。为了确保视图与数据的同步，开发者应避免直接通过索引或属性名修改，而是采用Vue提供的变异方法或`Vue.set`、`Vue.delete`等辅助方法。理解并熟练运用这些技巧，将有助于编写出更加健壮且高效的Vue应用。