Vue3系列 - 响应式系统的限制

Vue3的响应式系统虽然强大，但也存在一些限制，这些限制主要体现在reactive.ts和相关文件中。

主要限制包括：

数组索引和长度变化：虽然Vue可以检测到通过索引设置数组元素的变化，但这种操作不是响应式的最佳实践。

if (__DEV__) {
  if (isArray(target)) {
    warn(
      `Avoid using Array as root value for ${
        shallow ? `shallowReactive()` : `reactive()`
      } as it cannot be tracked in watch() or watchEffect(). Use ${
        shallow ? `shallowRef()` : `ref()`
      } instead. This is a Vue-2-only limitation.`
    )
  }
}

新增属性：对于已创建的响应式对象，直接添加新属性不会触发更新，需要使用Vue.set或扩展运算符创建新对象。
删除属性：同样，直接删除属性也不会触发更新，需要使用Vue.delete。
Map和Set：在Vue2兼容模式下，不支持Map和Set等集合类型的响应式。

if (isCollectionType(target)) {
  warn(
    `Vue 2 does not support reactive collection types such as Map or Set.`
  )
}

原始值包装：原始值（如字符串、数字）需要通过ref包装才能变成响应式。

if (target == null || isPrimitive(target)) {
  warn(`value cannot be made reactive: ${String(target)}`)
}

深层嵌套对象：过深的对象嵌套可能导致性能问题，因为Vue会递归地将每个嵌套对象转换为响应式。

了解这些限制有助于我们更好地使用Vue的响应式系统，避免常见的陷阱。