宁波网站建设优化企业简历模板制作
Vue3 的内置 API 相比 Vue2 有较大调整，更注重模块化（按需导入）、TypeScript 支持和组合式 API 的灵活性。主要可分为全局 API、响应式 API、组件实例 API、生命周期钩子、模板相关 API 等几大类。以下是核心内置 API 的详细说明：
一、全局 API（从 vue 导入，替代 Vue2 的 Vue 构造函数方法）
全局 API 用于创建应用、定义组件、处理异步组件等，需从 vue 显式导入。
1. createApp(rootComponent, rootProps?)
- 作用：创建 Vue 应用实例（替代 Vue2 的
new Vue()），是所有应用的入口。 - 示例：
import { createApp } from 'vue' import App from './App.vue'const app = createApp(App) // 创建应用实例 app.mount('#app') // 挂载到 DOM - 应用实例方法：
app.mount(container)：挂载应用到指定 DOM 容器；app.component(name, component)：全局注册组件；app.directive(name, directive)：全局注册指令；app.use(plugin)：安装插件（如 VueRouter、Pinia）；app.config：配置应用（如app.config.errorHandler捕获全局错误）。
2. defineComponent(options | setup)
- 作用：定义一个组件，主要用于 TypeScript 类型推导（提供组件选项的类型提示），对运行时无影响。
- 示例：
import { defineComponent } from 'vue'export default defineComponent({props: {title: String},setup(props) {return { props }} })
3. defineAsyncComponent(options | loader)
- 作用：定义异步组件（按需加载，优化性能），替代 Vue2 的
() => import()写法。 - 示例：
import { defineAsyncComponent } from 'vue'// 简单写法：加载函数 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))// 完整配置（加载状态、错误状态） const AsyncComponentWithOptions = defineAsyncComponent({loader: () => import('./AsyncComponent.vue'),loadingComponent: Loading, // 加载中显示的组件errorComponent: Error, // 加载失败显示的组件delay: 200, // 延迟显示加载组件（毫秒）timeout: 3000 // 超时时间（毫秒） })
4. 工具类 API
isVNode(vnode)：判断一个值是否为 VNode（虚拟节点）。mergeProps(...props)：合并多个 props 对象（处理冲突，如 class、style 会合并，其他属性后者覆盖前者）。toRefs(reactiveObj)：将响应式对象（reactive创建）转换为普通对象，其属性为ref（用于解构响应式对象时保留响应性）。
二、响应式 API（核心，实现数据响应式）
响应式 API 是 Vue3 组合式 API 的核心，用于创建和操作响应式数据。
1. ref(value)
- 作用：创建一个响应式的“引用类型”数据（支持基本类型、对象、数组），返回一个包含
value属性的对象。 - 特点：访问/修改时需通过
.value（模板中可省略）。 - 示例：
import { ref } from 'vue'const count = ref(0) // 基本类型 console.log(count.value) // 0 count.value++ // 修改值（触发更新）const user = ref({ name: '张三' }) // 对象 user.value.name = '李四' // 修改对象属性（响应式）
2. reactive(obj)
- 作用：创建一个响应式的对象（仅支持对象/数组，不支持基本类型），返回原对象的响应式代理。
- 特点：直接访问/修改属性（无需
.value），但不能直接赋值新对象（会丢失响应性）。 - 示例：
import { reactive } from 'vue'const user = reactive({ name: '张三', age: 20 }) user.age = 21 // 直接修改属性（响应式）// 错误：直接赋值新对象会丢失响应性 // user = { name: '李四' } // 正确：修改内部属性 Object.assign(user, { name: '李四' })
3. computed(getter | { get, set })
- 作用：创建计算属性（依赖其他响应式数据，自动缓存结果）。
- 示例：
import { ref, computed } from 'vue'const count = ref(1) // 只读计算属性 const doubleCount = computed(() => count.value * 2) console.log(doubleCount.value) // 2// 可写计算属性 const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: (newVal) => {const [f, l] = newVal.split(' ')firstName.value = flastName.value = l} })
4. 监听类 API
-
watch(source, callback, options?)：监听响应式数据变化（类似 Vue2 的watch选项）。import { ref, watch } from 'vue'const count = ref(0) // 监听单个ref watch(count, (newVal, oldVal) => {console.log(`count从${oldVal}变成${newVal}`) })// 监听多个源 watch([count, user], ([newCount, newUser], [oldCount, oldUser]) => {// 处理变化 }, { deep: true }) // 深度监听对象 -
watchEffect(effect)：自动追踪依赖的响应式数据，依赖变化时重新执行（无需手动指定监听源）。import { ref, watchEffect } from 'vue'const count = ref(0) watchEffect(() => {console.log(`count变化了：${count.value}`) // 自动追踪count })
5. 响应式工具 API
isRef(value)：判断一个值是否为ref创建的响应式引用。unref(value)：若value是ref，则返回其.value；否则返回value（简化访问）。toRef(reactiveObj, key)：从响应式对象中提取单个属性，创建一个ref（与原对象保持关联）。shallowRef(value)/shallowReactive(obj)：创建“浅响应式”数据（只响应顶层属性变化，深层不响应）。readonly(obj)：创建一个只读的响应式代理（修改会警告，适合保护数据）。
三、组件实例 API（this 上的属性/方法，或组合式 API 中通过上下文访问）
组件实例 API 用于组件内部操作（如事件、插槽、DOM 等），在选项式 API 中通过 this 访问，在组合式 API 中需通过 getCurrentInstance 获取实例后访问。
1. 核心属性
$attrs：包含父组件传递的非 props 属性（除 class、style 外），可透传给子组件。$emit(event, ...args)：触发自定义事件（与 Vue2 一致，组合式 API 中直接用emit）。$slots：访问插槽内容（包含默认插槽和具名插槽，Vue3 中合并了 Vue2 的$scopedSlots）。// 组合式 API 中访问插槽 import { useSlots } from 'vue' const slots = useSlots() console.log(slots.default()) // 获取默认插槽内容$refs：访问通过ref属性标记的 DOM 元素或组件实例（与 Vue2 类似，非响应式）。
2. 核心方法
$nextTick(callback)：在 DOM 更新完成后执行回调（与 Vue2 一致，组合式 API 中可直接导入nextTick）。import { nextTick } from 'vue' nextTick(() => {// DOM 已更新 })$forceUpdate()：强制组件重新渲染（避免过度使用，优先通过响应式数据触发更新）。
四、生命周期钩子（组合式 API 中导入使用）
Vue3 的生命周期钩子需从 vue 导入，在 setup 中调用（替代 Vue2 选项式的生命周期选项）。
| 组合式 API | 选项式 API | 作用 |
|---|---|---|
onMounted | mounted | 组件挂载后执行 |
onUpdated | updated | 组件更新后执行（DOM 已更新） |
onUnmounted | unmounted | 组件卸载后执行 |
onBeforeMount | beforeMount | 组件挂载前执行 |
onBeforeUpdate | beforeUpdate | 组件更新前执行（DOM 未更新） |
onBeforeUnmount | beforeDestroy | 组件卸载前执行 |
onErrorCaptured | errorCaptured | 捕获子组件抛出的错误 |
- 示例：
import { onMounted, onUnmounted } from 'vue'setup() {onMounted(() => {console.log('组件挂载完成')})onUnmounted(() => {console.log('组件已卸载')}) }
五、模板相关 API（内置组件和指令）
1. 内置组件
<component :is="component" />：动态渲染组件（与 Vue2 一致，支持组件对象或注册名）。<keep-alive>：缓存组件（避免切换时重复创建/销毁），可配合include/exclude控制缓存范围。<keep-alive include="ComponentA,ComponentB"><component :is="currentComponent" /> </keep-alive><slot>：插槽出口，支持具名插槽（name属性）和作用域插槽（v-bind传递参数）。
2. 内置指令
v-model：双向绑定（Vue3 中统一了组件和表单元素的用法，支持自定义修饰符）。v-if/v-else-if/v-else：条件渲染。v-for：列表渲染（支持(item, index) in list或对象迭代）。v-on（简写@）：事件绑定（支持修饰符如.stop、.prevent）。v-bind（简写:）：属性绑定（支持对象语法和数组语法）。
六、Vue3 与 Vue2 API 对比的核心变化
- 全局 API 模块化：Vue2 的
Vue.component()等全局方法，在 Vue3 中改为app.component()（应用实例方法），需显式导入。 - 响应式 API 重构：用
ref/reactive替代 Vue2 的Object.defineProperty实现，支持更灵活的响应式数据。 - 生命周期钩子导入化：组合式 API 中需导入生命周期函数，而非在选项中定义。
- 移除部分 API：如
$children（推荐用$refs）、Vue.set（改为set导入）、Vue.delete（改为delete导入）。
总结
Vue3 的内置 API 设计更注重模块化和灵活性，组合式 API 中的响应式工具（ref/reactive）、生命周期钩子和全局应用方法（createApp）是核心。相比 Vue2，API 更清晰，TypeScript 支持更好，且按需导入减少了打包体积。掌握这些 API 是使用 Vue3 开发的基础。