Vue 3 常用 API 速查表

Vue 3 提供了丰富的 API，支持组件开发、响应式数据管理和生命周期控制。本节整理了 Vue 3 的常用 API，包括 Composition API、Options API 和指令等，旨在为开发者提供快速参考。以下内容按功能分类，包含简要说明和示例，帮助你在开发中快速查找和应用。

1. Composition API

核心函数

API描述示例
setup()组件逻辑的入口，取代 data 和 methods<script>export default { setup() { return { count: ref(0) } } }</script>
ref()创建响应式引用，适用于单一值const count = ref(0); count.value++
reactive()创建深层响应式对象const state = reactive({ count: 0 })
computed()创建计算属性，支持 getter/setterconst double = computed(() => count.value * 2)
watch()监听响应式数据变化watch(count, (newVal) => console.log(newVal))

示例

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    watch(count, (newVal) => console.log('Count:', newVal));
    const increment = () => count.value++;
    return { count, double, increment };
  }
};
</script>

生命周期钩子

API对应 Options API描述示例
onBeforeMountbeforeMount组件挂载前onBeforeMount(() => console.log('Before Mount'))
onMountedmounted组件挂载后onMounted(() => console.log('Mounted'))
onBeforeUpdatebeforeUpdate数据更新前，DOM 未刷新onBeforeUpdate(() => console.log('Before Update'))
onUpdatedupdated数据更新后，DOM 已刷新onUpdated(() => console.log('Updated'))
onBeforeUnmountbeforeUnmount组件卸载前onBeforeUnmount(() => console.log('Before Unmount'))
onUnmountedunmounted组件卸载后onUnmounted(() => console.log('Unmounted'))

示例

<script>
import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => console.log('Component Mounted'));
    onUnmounted(() => console.log('Component Unmounted'));
  }
};
</script>

其他工具函数

API描述示例
shallowRef()创建浅层响应式引用const shallow = shallowRef({ count: 0 })
shallowReactive()创建浅层响应式对象const shallow = shallowReactive({ count: 0 })
readonly()创建只读代理const readOnly = readonly(ref(0))
toRefs()将 reactive 对象转为 refsconst state = reactive({ count: 0 }); const { count } = toRefs(state)
markRaw()标记对象为非响应式const raw = markRaw({ data: 'raw' })

2. Options API

常用选项

选项描述示例
data定义响应式数据data: () => ({ count: 0 })
methods定义组件方法methods: { increment() { this.count++ } }
computed定义计算属性computed: { double() { return this.count * 2 } }
watch监听数据变化watch: { count(newVal) { console.log(newVal) } }
props定义组件属性props: { initial: Number }
emits声明自定义事件emits: ['update']

示例

<script>
export default {
  props: { initial: Number },
  data: () => ({ count: 0 }),
  computed: {
    double() { return this.count * 2; }
  },
  methods: {
    increment() { this.count++; }
  },
  watch: {
    count(newVal) { console.log('Count:', newVal); }
  }
};
</script>

3. 指令

指令描述示例
v-bind绑定属性（简写 :attr）<div :class="className"></div>
v-on绑定事件（简写 @event）<button @click="increment">Click</button>
v-model双向绑定<input v-model="text" />
v-if条件渲染<div v-if="show">Visible</div>
v-for列表渲染<li v-for="item in items" :key="item.id">{{ item }}</li>
v-show显示/隐藏元素<div v-show="visible">Shown</div>
v-once只渲染一次<p v-once>{{ staticText }}</p>
v-memo缓存渲染（Vue 3.2+）<div v-memo="[value]">Cached</div>

示例

<template>
  <div>
    <input v-model="text" :placeholder="placeholder" />
    <ul>
      <li v-for="item in items" :key="item.id" v-show="item.active">{{ item.name }}</li>
    </ul>
    <p v-if="show" v-once>{{ message }}</p>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const text = ref('');
    const placeholder = ref('Enter text');
    const items = ref([{ id: 1, name: 'Item 1', active: true }]);
    const show = ref(true);
    const message = ref('Static Message');
    const toggle = () => (show.value = !show.value);
    return { text, placeholder, items, show, message, toggle };
  }
};
</script>

4. 全局 API

API描述示例
createApp()创建 Vue 应用实例const app = createApp(App)
app.mount()挂载应用到 DOMapp.mount('#app')
app.use()安装插件app.use(router)
app.component()注册全局组件app.component('MyComp', MyComp)
app.config.globalProperties添加全局属性app.config.globalProperties.$http = axios

示例

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

5. 特殊组件与工具

组件/工具描述示例
<Teleport>将内容传送到指定 DOM<Teleport to="body"><div>Modal</div></Teleport>
<Suspense>处理异步组件加载（实验性）<Suspense><AsyncComp /></Suspense>
defineAsyncComponent定义异步组件defineAsyncComponent(() => import('./Comp.vue'))
h()创建虚拟节点h('div', { class: 'box' }, 'Content')

示例

<template>
  <Suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComp: defineAsyncComponent(() => import('./AsyncComp.vue'))
  }
};
</script>

使用建议

  • 优先 Composition API：更灵活，支持 TypeScript。
  • 结合工具：如 Vite 和 Vue DevTools，提升开发效率。
  • 参考文档：查阅 Vue 3 官方文档 获取最新信息。

总结

本速查表涵盖了 Vue 3 的核心 API、指令和工具，为你在开发中提供快速参考。无论是新手还是进阶开发者，都可以通过这些示例快速上手并应用到项目中。下一节将提供更多实用资源，继续丰富你的工具箱！

Last Updated::