文章目录Vue3 完整 API 分类梳理常用核心一、响应式核心 API最常用组合式必备1. 基础响应式refreactivereactive和ref对比2. 计算 侦听watchwatch语法watchEffectwatchPostEffect二、生命周期 API只能在 setup 同步调用三、DOM 与模板相关 API四、组件实例相关 API五、工具判断 API六、全局应用 APIcreateApp 返回 app 实例调用七、内置指令注意指令≠API区分开八、Vue2 对比补充简单区分快速区分一句话Vue3 完整 API 分类梳理常用核心api和指令不同一定区分开。一、响应式核心 API最常用组合式必备1. 基础响应式refref基本类型响应式数字、字符串、布尔reactive对象/数组响应式toRef把 reactive 对象单个属性转为 reftoRefs批量把 reactive 所有属性转 ref方便解构unref取出 ref 内部原始值isRef判断是否为 ref 对象isReactive判断是否为 reactive 代理shallowRef浅层 ref复杂对象不深层响应shallowReactive浅层响应式对象reactive和ref对比对比维度refreactive适用类型基本类型string、number、boolean等 对象/数组仅限对象/数组引用类型底层实现基于ref对象的.value属性访问基于 Proxy 代理直接访问属性访问方式需要用.value访问/修改直接访问属性不需要.value模板中使用自动解包无需.value直接使用无需.value解构响应性❌ 解构后响应性丢失❌ 解构后响应性丢失重新赋值✅ 支持整体重新赋值xxx.value 新值❌ 不支持整体重新赋值会失去响应性函数参数传递需要传.value或传整个ref对象直接传对象但解构会丢失响应性适用场景通用基本类型为主对象也可用复杂对象/表单数据2. 计算 侦听computed计算属性依赖缓存watch侦听数据变化(完整监听)。示例templatedivinputv-modelnameplaceholder输入姓名/p当前姓名{{ name }}/p/div/templatescriptsetupimport{ref,watch}fromvueconstnameref()// 监听 name 的变化watch(name,(newValue,oldValue){console.log(姓名从 ${oldValue} 变成了 ${newValue})})/scriptwatch语法watch(source,callback,options)watchEffect自动收集依赖不用指定监听源watchPostEffectDOM更新后执行effect二、生命周期 API只能在 setup 同步调用onMounted组件挂载完成onUpdated数据更新、DOM 重渲染后onUnmounted组件销毁onBeforeMount挂载前onBeforeUpdate更新前onBeforeUnmount销毁前onErrorCaptured捕获子组件错误onActivated/onDeactivatedkeep-alive 激活/失活三、DOM 与模板相关 APIh创建 VNoderender 渲染函数nextTick等待 DOM 更新完成后执行回调useSlots获取组件插槽useAttrs获取组件透传属性 $attrsinject注入祖先组件 provide 数据provide向后代组件提供数据四、组件实例相关 APIgetCurrentInstance获取当前组件实例谨慎使用definePropsscript setup定义 propsdefineEmitsscript setup定义事件defineModel简化双向绑定Vue3.4defineExpose暴露组件方法给父组件调用五、工具判断 APIisProxy判断是否为 reactive/shallowReactive 代理isReadonly判断只读响应式对象readonly创建只读响应式数据shallowReadonly浅层只读toRaw获取响应式对象原始数据解除代理markRaw标记对象永远不被响应式劫持六、全局应用 APIcreateApp 返回 app 实例调用constappcreateApp(App)app.component()全局注册组件app.directive()全局注册自定义指令app.use()安装插件vue-router、pinia、UI库app.provide()全局注入数据app.config全局配置errorHandler、globalProperties七、内置指令注意指令≠API区分开指令写在模板上以v-开头不属于 JS APIv-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 等是组件配置项不是导入式 APIVue3 同时兼容选项式 组合式 API。快速区分一句话APIJS 里 import 导入、在 setup 中调用的方法ref/watch/onMounted/h 等指令写在模板标签上v-xxx语法糖:组件选项Vue2 写法、Vue3 兼容watch:{}, computed:{}