Vue3相比Vue2的改进之处

Vue 3 相比 Vue 2 在多个方面进行了重大改进，主要体现在以下方面：

1. 性能提升

更小的体积：Tree-shaking 支持，打包体积减少约 41%
更快的渲染：基于 Proxy 的响应式系统，初始渲染快 55%，更新快 133%
更好的内存使用：组件实例内存减少约 50%

2. Composition API（组合式 API）

复制代码

// Vue 2 Options API
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

// Vue 3 Composition API
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}

3. 响应式系统重写

复制代码

// Vue 2：Object.defineProperty
// 局限性：无法检测新增属性、数组索引变化

// Vue 3：Proxy
const state = reactive({ count: 0 })
// 完全支持动态添加属性、数组索引

4. 更好的 TypeScript 支持

代码完全用 TypeScript 重写
更好的类型推断
完整的类型定义

5. 新的组件特性

Fragment（片段）

复制代码

<!-- 可以有多重根节点 -->
<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>

Teleport（传送）

复制代码

<teleport to="body">
  <Modal />
</teleport>

Suspense（异步组件）

复制代码

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <Loading />
  </template>
</Suspense>

6. 生命周期变化

复制代码

// Vue 2              // Vue 3
beforeCreate      ->  setup()
created           ->  setup()
beforeMount       ->  onBeforeMount
mounted           ->  onMounted
beforeUpdate      ->  onBeforeUpdate
updated           ->  onUpdated
beforeDestroy     ->  onBeforeUnmount
destroyed         ->  onUnmounted
activated         ->  onActivated
deactivated       ->  onDeactivated
errorCaptured     ->  onErrorCaptured

7. 多个 v-model

复制代码

<!-- Vue 2：只能有一个 v-model -->
<ChildComponent v-model="pageTitle" />

<!-- Vue 3：支持多个 -->
<ChildComponent 
  v-model:title="pageTitle"
  v-model:content="pageContent"
/>

8. 自定义渲染器 API

允许自定义渲染逻辑
支持构建非 DOM 环境的应用（如 Canvas、Three.js）

9. 更好的全局 API

复制代码

// Vue 2：全局 API 修改 Vue 原型
Vue.component()
Vue.directive()

// Vue 3：按需导入的 API
import { createApp } from 'vue'
const app = createApp(App)
app.component()
app.directive()

10. 更灵活的组合逻辑

复制代码

// 逻辑复用 - 自定义组合函数
function useMousePosition() {
  const x = ref(0)
  const y = ref(0)
  
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  
  return { x, y }
}

11. 其他改进

事件侦听器缓存：提升组件更新性能
更好的插槽编译：减少不必要的重新渲染
自定义元素支持：更好的 Web Components 集成
过渡类名变更：更一致的命名

迁移注意事项

Vue 3 不再支持 IE11
部分 API 有破坏性变更
推荐使用 Vue CLI 或 Vite 进行迁移
官方提供迁移指南和兼容性构建版本

Vue 3 的这些改进让开发者能够构建更高效、更易维护的应用，同时保持 Vue 2 的简洁性和易用性。