Vue3 数组数据改变视图不更新？常见原因及解决方案

在 Vue3 中，可以使用响应式 API 来改变数组中的数据，但是需要遵循一些规则才能让视图更新。下面是一些可能导致视图不更新的原因和解决方法：

1. 直接修改数组的某个元素，而不是使用 Vue 提供的 API 来修改数组：

   // 错误示例
   this.items[0] = newValue;
   
   // 正确示例
   this.items.splice(0, 1, newValue);
   

   使用 splice 方法来修改数组中的元素，Vue 会监听这个操作并更新视图。如果直接修改数组元素的值，则 Vue 无法监听到这个操作，视图不会更新。

2. 在组件初始化时，将数组赋值给响应式数据时，需要使用 Vue 提供的响应式 API（如 ref、reactive 等）来包装数组：

   // 错误示例
   data() {
     return {
       items: [1, 2, 3]
     }
   }
   
   // 正确示例
   import { reactive } from 'vue';
   
   setup() {
     const items = reactive([1, 2, 3]);
     return { items };
   }
   

   使用响应式 API 包装数组后，Vue 会将数组中的每个元素都变成响应式数据，从而实现对数组的监听和更新。

3. 在修改数组时，需要使用 Vue 提供的 API 来修改数组，而不是直接修改数组：

   // 错误示例
   this.items.push(newValue);
   
   // 正确示例
   this.items = [...this.items, newValue];
   

   如果使用 push 等方法来修改数组，Vue 无法监听到这个操作，视图不会更新。应该使用 Vue 提供的 API 来修改数组，或者使用数组展开运算符等方式创建一个新的数组来更新响应式数据。

4. 如果在组件中使用 computed 来计算数组的某个属性，需要将数组作为 computed 的依赖：

   // 错误示例
   computed: {
     total() {
       return this.items.length;
     }
   }
   
   // 正确示例
   computed: {
     total() {
       return this.items.length;
     }
   },
   watch: {
     items() {
       this.total = this.items.length;
     }
   }
   

   如果在 computed 中计算数组的某个属性，但是没有将数组作为依赖，那么当数组发生变化时，computed 不会重新计算，视图也不会更新。应该将数组作为 computed 的依赖，并在 watch 中监听数组的变化，手动更新 computed 的值。