Vue3为什么直接替换数组会导致响应式失效？

在 Vue 3 中，响应式系统是基于 ES6 的 Proxy 实现的。Proxy 可以拦截对象的操作，从而实现对数据变化的检测和响应。但是，直接替换整个数组（如 contentList = newArray）并不会触发 Proxy 的拦截，因为这相当于改变了变量的引用，而不是修改了原数组的内容。

原理分析

1. reactive 的响应式机制

   • reactive 创建的是一个响应式对象，它通过 Proxy 拦截对象的操作。
   • 当你直接替换整个数组时，Proxy 无法检测到这种变化，因为它是针对原数组的操作进行拦截的，而不是针对变量的引用变化。

2. ref 的响应式机制

   • ref 创建的是一个响应式引用对象，通过 .value 来访问和修改值。
   • 当你修改 ref 的 .value 时，Vue 的响应式系统会检测到变化并更新视图。

示例代码分析

在你的代码中，contentList 是通过 reactive 创建的响应式数组：

let contentList = reactive([
  { id: 1, value: 'aaa' },
  { id: 2, value: 'bbb' },
  { id: 3, value: 'ccc' },
  { id: 4, value: 'ddd' },
])

当你执行以下操作时：

contentList = contentList.filter((item) => item.id != id)

你实际上是在改变 contentList 的引用，而不是修改原数组的内容。Proxy 无法检测到这种变化，因此视图不会更新。

解决方案

1. 使用 ref 定义数组

   • 使用 ref 定义数组，并通过 .value 来操作数组，这样 Vue 的响应式系统可以检测到变化。

   const contentList = ref([
     { id: 1, value: 'aaa' },
     { id: 2, value: 'bbb' },
     { id: 3, value: 'ccc' },
     { id: 4, value: 'ddd' },
   ])
   

   在删除方法中：

   contentList.value = contentList.value.filter((item) => item.id !== id)
   

2. 使用数组的变异方法

   • 使用 splice 等数组变异方法，这些方法会直接修改原数组，Vue 的响应式系统可以检测到这些变化。

   const delFun = (id) => {
     const index = contentList.findIndex((item) => item.id === id)
     if (index !== -1) {
       contentList.splice(index, 1)
     }
   }
   

总结

直接替换数组会导致响应式失效，因为 Vue 的响应式系统基于 Proxy，只能检测到对原数组的操作，而无法检测到变量引用的变化。解决方法是使用 ref 并通过 .value 操作数组，或者使用数组的变异方法（如 splice）来修改数组内容。