介绍

Vue3 四大核心

一、性能大幅提升

• 打包体积减少
• 初次渲染速度提升
• 更新渲染速度提升
• 内存占用减少

二、源码底层升级

• 使用 Proxy 替代 Vue2 的 Object.defineProperty 实现响应式，支持数组、深层对象监听，解决 Vue2 响应式缺陷。
• 重写虚拟 DOM，优化 Tree-Shaking 按需打包。

三、全面拥抱 TypeScript

Vue3 源码由 TS 编写，对 TS 类型推导、类型约束支持极佳，适合大型项目开发。

四、新增大量特性

组合式 API、全新内置组件、新生命周期、语法规范调整等。

Composition API 核心用法

语法糖

setup 是组合式 API 的入口，执行时机早于 beforeCreate，内部 this 为 undefined。

无需手动 return，代码更简洁：

<script setup lang="ts">
let name = "张三";
function changeName() {
  name = "李四";
}
</script>

知识点

ref与reactive

ref 用于定义基本类型响应式数据（字符串、数字、布尔），返回 Ref 实例。

• JS 逻辑中修改需要 .value
• 模板中直接使用，无需 .value

reactive 专门用于对象、数组类型，基于 Proxy 实现深层响应式，无需 .value。

使用

• 基本类型 → 必用 ref
• 浅层对象 → ref /reactive 均可
• 多层嵌套复杂对象 → 推荐 reactive

toRef /toRefs

直接解构 reactive 对象会丢失响应式，使用 toRef（单个属性）、toRefs（批量属性）解决。

computed 计算属性

依赖已有响应式数据，自动计算新值，分为只读和可读写两种。

watch 监听

watch 主动监听指定响应式数据变化，Vue3 支持监听 ref、reactive、函数、数组。

场景

• 监听 ref 基本类型
• 监听 ref 对象类型（需开启 deep）
• 监听 reactive 对象（默认深度监听）
• 监听对象单个属性（使用函数写法）
• 同时监听多个数据（数组写法）

路由

路由两种模式

• history 模式：createWebHistory()，URL 无 #，美观，上线需要后端配置防 404。
• hash 模式：createWebHashHistory()，URL 带 #，兼容性好，无需后端配置。

命名路由

给路由配置 name，简化跳转：

routes: [
  { path: "/home", name: "home", component: Home }
]

嵌套路由

使用 children 配置子路由，子组件中必须预留 <RouterView>。

传参

query 参数

传参：

<RouterLink :to="{ path: '/news', query: { id: 1 } }">跳转</RouterLink>

接收：

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.id);
</script>

params 参数（动态路由）

传参：

<RouterLink :to="{ name: 'news', params: { id: 1 } }">跳转</RouterLink>

接收：

const route = useRoute();
console.log(route.params.id);

Pinia

Pinia 替代 Vuex，语法更简洁、体积更小、TS 友好

创建 Store

Store 三要素：state（数据）、getters（计算属性）、actions（方法）。

import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    add() {
      this.count++;
    }
  }
});

storeToRefs 解构响应式

直接解构 Store 会丢失响应式，使用 storeToRefs，并且storeToRefs只能解构值，不能解构函数

组件通信

父子传参

父传子传值，子传父传函数

自定义事件（一般是子传父）

子组件 defineEmits 触发事件，父组件监听：

子组件：

<script setup lang="ts">
const emit = defineEmits(["sendMsg"]);
const send = () => emit("sendMsg", "子组件数据");
</script>

父组件：

<Child @sendMsg="handleMsg" />

$attrs 祖传孙传参

父组件属性自动穿透到后代组件，会过滤已被 props 接收

总结

1. 响应式由 defineProperty 改为 Proxy。
2. 主推组合式 API，保留选项式 API 兼容。
3. 移除事件总线，推荐 mitt；Vuex 替换为 Pinia。
4. 移除 $children、过滤器、部分生命周期。
5. 过渡动画类名规则修改，v-model 组件写法重构。
6. 全局 API 挂载到应用实例 app 上。