面试题：Vue中响应式系统数据更新但视图未更新的常见原因及解决方案

Question

在Vue项目开发中，有时会遇到数据已经发生了变化，但是视图却没有更新的情况。请列举至少两种可能导致这种现象的原因，并说明相应的解决方案。

Answer 1

1. 原因：对象新增属性未被Vue的响应式系统追踪。
   • 解决方案：使用Vue.set（Vue2）或this.$set（在Vue实例方法中），例如Vue.set(obj, 'newProp', 'newValue')；在Vue3中可以使用reactive函数重新创建响应式对象，或者使用ref来包裹对象。
2. 原因：数组通过索引直接修改元素，Vue无法检测到变化。
   • 解决方案：使用数组的变异方法，如this.$set(this.array, index, newVal)（Vue2），或者在Vue3中使用toRaw和reactive重新创建响应式数组，也可以使用数组的splice方法，如this.array.splice(index, 1, newVal)。
3. 原因：在created钩子函数中，数据获取可能异步，此时DOM还未完全渲染，导致视图更新不及时。
   • 解决方案：可以使用nextTick方法，等待DOM更新后再进行操作。例如在Vue2中this.$nextTick(() => { // 操作DOM })，Vue3中可以从vue中导入nextTick使用nextTick(() => { // 操作DOM })。