ref 和 reactive
reactive的实现：reactive 通过 Proxy 对对象或数组的每个属性进行深度代理，实现响应式。这种设计使得 reactive 能自动追踪所有嵌套属性的变化，但由于 Proxy 无法直接处理基本数据类型（如 number 、 string 、 boolean ），因此， reactive 不适用于基本数据类型。ref的实现：为了实现基本数据类型的响应式，Vue 设计了 ref。ref 会将基本数据类型封装为一个包含 value 属性的对象，通过 getter 和 setter 实现响应式依赖追踪和更新。当访问或修改 ref.value 时，Vue 内部会触发依赖更新。此外，对于复杂数据类型（如对象或数组），ref 的内部实现会直接调用 reactive，将复杂数据类型变为响应式。
建议使用 ref
vue3 和 vue2 的区别
- 增加组合式 API（Composition API）
- 基于 Proxy 实现响应式
- 完全用 TypeScript 重写
- 多个根节点，组件模板不再强制要求单个根元素
- 支持多个 v-model 绑定
- 生命周期钩子变化
- off, $once 实例方法被移除
- 移除过滤器 (filters)，推荐使用方法或计算属性代替
- 编译优化：更高效的代码分割和 Tree Shaking 技术，减少打包体积
Vue3 diff 算法做了哪些优化？
- Patch Flag：在编译模板时，标记节点的哪些部分可能会发生变化，运行时根据标记跳过无关属性的比较
- 静态提升：将纯静态节点提升为常量，静态内容完全跳过 Diff 过程，后续更新时直接复用
- 最长递增子序列算法：Vue3 利用最长递增子序列（LIS）算法来优化对比流程。通过找到新旧节点之间的最长递增子序列，Vue3 可以减少移动操作，从而提高更新效率。
- 事件缓存：自动缓存内联事件处理器，避免每次渲染重新创建新函数
watch 和 watchEffect 的区别
依赖追踪方式
- watch ：需要显式声明依赖，监听指定的数据源；可以监听多个数据源或进行深度监听。
- watchEffect ：会自动追踪 作用域内所有的响应式依赖，不需要显式声明依赖。
执行时机
- watch ：在监听的响应式数据变化后执行。
- watchEffect ：在 组件挂载时 立即执行一次副作用，并在 依赖发生变化时 再次执行。