vue笔记(五)api

Vue3 完整 API 分类梳理（常用+核心）

api和指令不同一定区分开。

一、响应式核心 API（最常用，组合式必备）

1. 基础响应式

• ref：

ref

基本类型响应式（数字、字符串、布尔）

reactive

对象/数组响应式

• toRef：把 reactive 对象单个属性转为 ref
• toRefs：批量把 reactive 所有属性转 ref，方便解构
• unref：取出 ref 内部原始值
• isRef：判断是否为 ref 对象
• isReactive：判断是否为 reactive 代理
• shallowRef：浅层 ref，复杂对象不深层响应
• shallowReactive：浅层响应式对象

reactive和ref对比

2. 计算 & 侦听

• computed：计算属性，依赖缓存

watch

侦听数据变化(完整监听)。

示例：

<template>
    <div>
      <input v-model="name" placeholder="输入姓名" />
      <p>当前姓名：{{ name }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  
  const name = ref('')
  
  // 监听 name 的变化
  watch(name, (newValue, oldValue) => {
    console.log(`姓名从 "${oldValue}" 变成了 "${newValue}"`)
  })
  </script>

watch语法

watch(source, callback, options)

watchEffect

自动收集依赖，不用指定监听源

watchPostEffect

DOM更新后执行effect

二、生命周期 API（只能在 setup 同步调用）

• onMounted：组件挂载完成
• onUpdated：数据更新、DOM 重渲染后
• onUnmounted：组件销毁
• onBeforeMount：挂载前
• onBeforeUpdate：更新前
• onBeforeUnmount：销毁前
• onErrorCaptured：捕获子组件错误
• onActivated / onDeactivated：keep-alive 激活/失活

三、DOM 与模板相关 API

• h：创建 VNode（render 渲染函数）
• nextTick：等待 DOM 更新完成后执行回调
• useSlots：获取组件插槽
• useAttrs：获取组件透传属性 $attrs
• inject：注入祖先组件 provide 数据
• provide：向后代组件提供数据

四、组件实例相关 API

• getCurrentInstance：获取当前组件实例（谨慎使用）
• defineProps：<script setup> 定义 props
• defineEmits：<script setup> 定义事件
• defineModel：简化双向绑定（Vue3.4+）
• defineExpose：暴露组件方法给父组件调用

五、工具判断 API

• isProxy：判断是否为 reactive/shallowReactive 代理
• isReadonly：判断只读响应式对象
• readonly：创建只读响应式数据
• shallowReadonly：浅层只读
• toRaw：获取响应式对象原始数据（解除代理）
• markRaw：标记对象永远不被响应式劫持

六、全局应用 API（createApp 返回 app 实例调用）

const app = createApp(App)

• app.component()：全局注册组件
• app.directive()：全局注册自定义指令
• app.use()：安装插件（vue-router、pinia、UI库）
• app.provide()：全局注入数据
• app.config：全局配置（errorHandler、globalProperties）

七、内置指令（注意：指令≠API，区分开）

指令写在模板上，以 v- 开头，不属于 JS API：
v-if / v-else / v-for / v-show / v-model / v-bind(:) / v-on(@) / v-slot(#) / v-text / v-html

八、Vue2 对比补充（简单区分）

Vue2 没有组合式 API，只有选项式：
data、methods、computed、watch、mounted、created 等是组件配置项，不是导入式 API；
Vue3 同时兼容选项式 + 组合式 API。

快速区分一句话

1. API：JS 里 import 导入、在 setup 中调用的方法（ref/watch/onMounted/h 等）
2. 指令：写在模板标签上 v-xxx，语法糖 : @
3. 组件选项：Vue2 写法、Vue3 兼容（watch:{}, computed:{}）