vue3

vue3和vue2的区别

• 双向数据绑定的原理不同
• 是否支持碎片
• API不同
• 定义数据变量方法不同
• 生命周期的不同
• 传值不同
• 指令和插槽不同
• main.js不同

vue3的性能为什么比vue2好？

• diff算法的优化
• 静态提升
• 事件侦听缓存

vue3为什么使用Proxy

• proxy可以代理整个对象，defineProperty只代理对象上的某个属性
• proxy对代理对象的监听更加丰富
• proxy代理对象会生成新的对象，不会修改被代理对象本身
• proxy补兼容ie浏览器

reactive+解构

用es6解构reactive对象得到的是原始值的副本，脱离了响应式系统，因此后续修改不会触发视图更新。Vue3的Proxy只能拦截对对象属性的访问和修改，结构时是浅拷贝、而不是引用拷贝。

• 不要解构，直接使用响应式对象属性
• toRefs转成ref对象
• 用ref，而不是reactive

数组更新

可以用a[1] = 999，但是为什么还推荐使用a.splice(1, 1, 999)

• vue2迁移项目，vue2中不能通过索引更新
• splice 是原子操作，Vue 可以更好地批量收集依赖和触发更新

Vue3 ref为什么要.value

• JS 中基础类型无法被 Proxy 代理，必须用对象包裹
• ref 本质就是一个 {value: 原始值} 的响应式对象
• 所以修改和访问时，必须通过 .value
• 在模板中会自动解构，所以不用写 .value

render 函数主要做这几件事：

1. 生成虚拟节点 VNode：基于组件的 props、响应式数据，通过 h / createVNode 描述 DOM 结构，不直接操作真实 DOM。
2. 交给渲染器做 Diff：数据更新时重新执行 render 得到新 VNode，渲染器对比新旧 VNode，最小化更新 DOM。
3. 实现跨平台渲染：Vue 运行时核心与平台操作分离，render 只负责描述结构，让 Vue 能渲染到 web、小程序、canvas 等环境。
4. 模板最终都会编译成 render：我们写的 <template> 本质上会被编译器优化后生成 render 函数，执行逻辑一致。

watch 和 watchEffect 的核心区别：

对比项	watch	watchEffect
依赖监听	手动指定要监听的数据源	自动追踪内部响应式依赖
初始执行	惰性执行，默认初始不触发	立即执行一次，再监听变化
新旧值	可同时获取 newValue、oldValue	只能获取当前最新值，无旧值
依赖清晰度	依赖明确，可读性高	依赖隐式，复杂场景不易追踪
执行时机	默认在 DOM 更新后执行	默认在 DOM 更新前执行
适用场景	需监听特定值、需要旧值、异步逻辑	依赖多且不确定、需初始化执行、简单联动
停止监听	返回函数可手动停止	同样返回函数可手动停止
配置项	支持 immediate、deep、flush 等	支持 flush、onTrack 等

如何解决跨域

• CORS（后端配置）
• 前端代理服务器（proxy）
  • 前端请求 → 先发给本地代理服务器 → 去请求目标后端接口（服务器之间通信，无跨域）
• Nginx 反向代理
• jsonp（后端配置）