每日 10

Vue3：
一、核心特性
Composition API
替代 Vue2 的 Options API，提供更灵活的逻辑组织方式（setup 函数）。
核心函数：ref, reactive, computed, watch, watchEffect。
逻辑复用：通过自定义 Hook（类似 React Hooks）替代 Mixins。
二、新功能与语法
Fragment（片段）
组件支持多根节点，无需包裹

。
Teleport（传送）
将组件渲染到 DOM 任意位置（如全局弹窗）：

内容

Suspense（异步组件）

处理异步组件加载状态：

<template #default>
<template #fallback>Loading...

v-model 增强

支持多个 v-model 绑定（如 v-model:title="value"）。
自定义修饰符（如 .trim）。
全局 API 变更
createApp 替代 new Vue()：

import { createApp } from 'vue';
const app = createApp(App);
app.mount('#app');
全局方法改为实例方法（如 app.component(), app.directive()）。

三、生命周期变化
选项式 API 生命周期
beforeDestroy → beforeUnmount
destroyed → unmounted
新增 renderTracked 和 renderTriggered（调试渲染依赖）。
Composition API 生命周期钩子
在 setup() 中使用：onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted 等。

四、响应式 API 详解
ref vs reactive
ref: 处理基本类型（如 number, string），通过 .value 访问。
reactive: 处理对象/数组，返回 Proxy 代理对象。
依赖侦听
watch: 明确监听特定数据源。
watchEffect: 自动追踪回调中的响应式依赖，立即执行。
响应式工具
toRefs: 将响应式对象解构为多个 ref，保持响应性。
readonly: 创建只读代理。

五、其他重要变化
事件 API
emits 选项显式声明自定义事件。
支持多个事件监听器（Vue2 中会被覆盖）。
自定义渲染器
允许非 DOM 环境渲染（如小程序、Canvas）。
Transition 组件
类名变更：v-enter → v-enter-from，v-leave → v-leave-from。

六、生态适配
Vue Router 4
适配 Vue3，API 调整（如 useRouter(), useRoute()）。
Vuex 4
兼容 Vue3，保留大部分 API。
Vite 工具
推荐构建工具，支持快速冷启动和热更新。