VUE3中的内置 API

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 对比的核心变化

1. 全局 API 模块化：Vue2 的 Vue.component() 等全局方法，在 Vue3 中改为 app.component()（应用实例方法），需显式导入。
2. 响应式 API 重构：用 ref/reactive 替代 Vue2 的 Object.defineProperty 实现，支持更灵活的响应式数据。
3. 生命周期钩子导入化：组合式 API 中需导入生命周期函数，而非在选项中定义。
4. 移除部分 API：如 $children（推荐用 $refs）、Vue.set（改为 set 导入）、Vue.delete（改为 delete 导入）。

总结

Vue3 的内置 API 设计更注重模块化和灵活性，组合式 API 中的响应式工具（ref/reactive）、生命周期钩子和全局应用方法（createApp）是核心。相比 Vue2，API 更清晰，TypeScript 支持更好，且按需导入减少了打包体积。掌握这些 API 是使用 Vue3 开发的基础。