一、Vue3 核心特性

总结一下Vue3的核心特性，Vue3的响应式使用 Proxy 重构响应式系统，虽然需要使用ref和reactive，但是整体还是好用一些。运行和打包通过 Tree-Shaking 提升性能，感官上来说性能是提升了很多。支持了 TypeScript ，刚接触前端开发的时候就觉得类型怎么可以随便切换，是弱类型语言，现在相当于多了一个属性的声明限制了类型，方便检查类型的错误。还有一些新的API也挺好用的如 Teleport、Suspense 等。

二、Vue3 与 Vue2 关键差异对比

三、Vue3 核心特性与重要 API 详解

1. Composition API：重构组件逻辑组织方式

核心思想：通过函数将相关逻辑抽离为可复用单元，解决 Vue2 中选项式 API 逻辑分散的问题。

<!-- Vue3 组件示例：Composition API 基础用法 -->
<template>
  <div>
    <h3>计数器：{{ count }}</h3>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'

export default {
  setup() {
    // 响应式数据：ref 用于基本类型，返回带 .value 的包装对象
    const count = ref(0)
    
    // 响应式数据：reactive 用于对象类型，直接代理对象
    const state = reactive({
      message: 'Hello Vue3'
    })
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    // 生命周期钩子：onMounted 替代 mounted
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    // 暴露给模板的数据和方法
    return {
      count,
      state,
      increment
    }
  }
}
</script>

2. 响应式系统升级：基于 Proxy 的高效响应式

• ref 与 reactive 的区别
  • ref()：适用于基本类型（如 number、string），返回一个带 .value 属性的响应式对象。
  • reactive()：适用于对象 / 数组，直接返回代理后的响应式对象。

// 示例：ref 与 reactive 的使用场景
import { ref, reactive } from 'vue'

// 基本类型用 ref
const num = ref(10)
num.value++ // 修改值

// 对象类型用 reactive
const user = reactive({ name: 'Vue3', age: 3 })
user.age++ // 直接修改属性

3. 生命周期钩子：在 setup 中使用组合式钩子

<script>
import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    // 组件挂载后执行
    onMounted(() => {
      console.log('组件已挂载到 DOM')
    })
    
    // 组件卸载前执行（如清理定时器）
    onBeforeUnmount(() => {
      console.log('组件即将卸载')
    })
    
    return {}
  }
}
</script>

4. 计算属性与监听器：API 用法优化

<template>
  <div>
    <p>原始值：{{ count }}</p>
    <p>双倍值：{{ doubleCount }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

<script>
import { ref, computed, watch, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    // 计算属性：与 Vue2 用法类似，但通过 computed 函数创建
    const doubleCount = computed(() => count.value * 2)
    
    // 普通监听器：watch 接收源、回调、选项
    watch(
      count, 
      (newVal, oldVal) => {
        console.log(`count 变化：${oldVal} -> ${newVal}`)
      }
    )
    
    // 响应式副作用：watchEffect 自动追踪依赖
    watchEffect(() => {
      console.log(`count 最新值：${count.value}`)
    })
    
    return {
      count,
      doubleCount
    }
  }
}
</script>

5. 性能优化：静态提升与懒编译

• 静态提升（Hoisting）：Vue3 会自动将不依赖响应式数据的节点提升为静态节点，减少重新渲染开销。
• 懒编译（Lazy Compilation）：只编译需要更新的组件部分，而非全量编译。

<!-- 静态节点示例：Vue3 会自动标记为 static -->
<template>
  <div>
    <!-- 以下节点不依赖响应式数据，会被静态提升 -->
    <h1>标题</h1>
    <p>静态文本</p>
    
    <!-- 依赖响应式数据的节点仍会保持动态 -->
    <p>动态文本：{{ message }}</p>
  </div>
</template>

6. 新组件特性：Fragment 与 Teleport

• Fragment：允许组件无单个根节点，直接返回多个节点。
• Teleport：将组件内容渲染到 DOM 树的其他位置（如模态框挂载到 body）。

<!-- Fragment 示例：组件返回多个根节点 -->
<template>
  <header>页面头部</header>
  <main>
    <slot />
  </main>
  <footer>页面底部</footer>
</template>

<!-- Teleport 示例：将模态框渲染到 body 下 -->
<template>
  <button @click="showModal = true">打开模态框</button>
  
  <teleport to="body">
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        模态框内容
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </teleport>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const showModal = ref(false)
    return { showModal }
  }
}
</script>

7. 全局 API 变化：模块化设计

// Vue2 全局 API 用法
import Vue from 'vue'
Vue.component('my-component', { /* ... */ })
Vue.use(MyPlugin)

// Vue3 全局 API 用法（通过 createApp）
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.component('my-component', { /* ... */ })
app.use(MyPlugin)
app.mount('#app')

四、Vue3 迁移建议

1. 逻辑重构：将 Vue2 中的选项式逻辑逐步迁移至 Composition API，通过 setup 函数组织代码。
2. 响应式适配：基本类型用 ref，对象类型用 reactive，避免直接修改 this。
3. 生命周期调整：使用组合式钩子（如 onMounted）替代选项式钩子。
4. 性能优化：利用静态提升特性，将不动态更新的节点标记为静态。

通过以上特性与 API 的详解，可清晰看到 Vue3 在开发体验、性能优化和代码可维护性上的显著提升，尤其适合中大型项目的架构设计与逻辑复用。Vue3 是 Vue.js 框架的第三代版本，于 2020 年 9 月发布。它带来了一系列重大改进，包括性能提升、更好的 TypeScript 支持和更灵活的组件逻辑组织方式。与 Vue2 相比，Vue3 主要有以下核心特性：

1. 组合式 API：提供了一种更灵活的方式来组织和复用组件逻辑，解决了 Vue2 中选项式 API 的 “大型组件复杂性” 问题。
2. 更好的 TypeScript 支持：组合式 API 的设计从根本上就支持 TypeScript，减少了类型声明的复杂度。
3. 性能优化：虚拟 DOM 重写、编译时优化和按需加载，使 Vue3 在初始化、更新和内存占用方面都有显著提升。
4. SFC 语法增强：新增了<script setup>语法糖，简化了组合式 API 的使用。
5. Composition API：提供了reactive、ref、computed等函数，使状态管理更加灵活。
6. Teleport：允许将组件内容渲染到 DOM 中的其他位置。
7. Suspense：支持异步组件的优雅加载状态管理。