一、响应式系统的重构
重大变更
Vue2响应式实现：
// 基于Object.defineProperty
function defineReactive(obj, key) {
let value = obj[key]
Object.defineProperty(obj, key, {
get() {
console.log('get', key)
return value
},
set(newVal) {
console.log('set', key)
value = newVal
}
})
}
新特性
Vue3 Proxy实现：
const reactive = (target) => {
return new Proxy(target, {
get(target, key) {
console.log('get', key)
return Reflect.get(target, key)
},
set(target, key, value) {
console.log('set', key)
return Reflect.set(target, key, value)
}
})
}
| 特性 | Vue2 | Vue3 |
|---|---|---|
| 数组监听 | 需重写方法 | 原生支持 |
| 属性新增 | 需Vue.set | 自动检测 |
| 性能损耗 | 约15% | 约5% |
二、Composition API的范式转移
// Options API（Vue2）
export default {
data() {
return { count: 0 }
},
methods: {
increment() { this.count++ }
},
mounted() {
console.log('mounted')
}
}
// Composition API（Vue3）
import { ref, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const increment = () => count.value++
onMounted(() => {
console.log('mounted')
})
return { count, increment }
}
}
| 指标 | Options API | Composition API |
|---|---|---|
| 代码组织 | 按选项分类 | 按功能组织 |
| 逻辑复用 | Mixins | Composables |
| TypeScript支持 | 中等 | 优秀 |
学习记录：2021年Vue3的Composition API使用率从初期的23%提升至2023年的78%（来源：Vue官方调研）
三、编译时优化机制
function render() {
with(this) {
return _c('div', [
_c('p', [_v(_s(message))]),
_c('button', { on: { click: handleClick } }, [_v('Click')])
])
}
}
// Vue3编译优化（Patch flags）
const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "Static Content")
function render(_ctx) {
return (_openBlock(), _createBlock("div", null, [
_hoisted_1,
_createVNode("button", { onClick: _ctx.handleClick }, "Click")
]))
}
| 优化策略 | Vue2 | Vue3 |
|---|---|---|
| 静态提升 | 无 | ⭕️ |
| 树结构优化 | 无 | ⭕️ |
| Diff算法 | 全量比对 | 动态追踪 |
性能测试：在1000个列表项的渲染测试中，Vue3的更新速度比Vue2快2.3倍（Chrome 115基准测试）
四、生态系统的演进
新方向
状态管理迁移路径：
| 技术 | Vue2 | Vue3 |
|---|---|---|
| 核心库 | Vuex 3 | Pinia 2 |
| TS支持 | 类型推断有限 | 完整类型安全 |
| API风格 | Mutation/Action | Composition Style |
// Pinia示例（Vue3）
export const useStore = defineStore('main', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})
迁移陷阱：Vue3不再支持EventBus模式，推荐使用provide/inject或外部状态管理
五、渐进式迁移路线图
| 阶段 | 工作内容 | 预计耗时 |
|---|---|---|
| 准备阶段 | 升级构建工具到Vite | 1-2天 |
| 混合模式 | 使用@vue/compat运行Vue2代码 | 3-5天 |
| 组件迁移 | 逐个组件重写为Composition API | 2-4周 |
| 生态迁移 | 替换Vuex为Pinia | 1-2周 |
// 渐进式迁移配置（vite.config.js）
export default {
resolve: {
alias: {
vue: '@vue/compat',
'@vue/runtime-dom': '@vue/compat'
}
}
}