当前位置：首页 > article >正文

Vue3 常用指令、属性、方法速查表

article 2025/2/28 15:31:45

以下是一份 Vue3 常用指令、属性、方法速查表，涵盖核心功能、Composition API 及实用技巧，方便快速查阅：

一、模板指令（Directives）

指令	说明	示例
`v-bind` / `:`	动态绑定属性（支持简写 `:`）	`<div :id="dynamicId">`
`v-model`	表单输入双向绑定（支持修饰符）	`<input v-model.trim="text">`
`v-on` / `@`	绑定事件（支持简写 `@`）	`<button @click="handleClick">`
`v-for`	循环渲染元素（需加 `key`）	`<li v-for="item in list" :key="item.id">`
`v-if` / `v-else`	条件渲染（动态添加/移除元素）	`<div v-if="show">显示内容</div>`
`v-show`	条件显示（通过 `display` 切换）	`<div v-show="isVisible">显示内容</div>`
`v-html`	渲染原始 HTML（注意 XSS 风险）	`<div v-html="rawHtml"></div>`
`v-slot`	定义插槽内容（可简写为 `#`）	`<template #header>标题</template>`
`v-pre`	跳过编译（保留原始内容）	`<div v-pre>{{ 此处不编译 }}</div>`
`v-once`	只渲染一次（后续更新忽略）	`<div v-once>{{ staticContent }}</div>`
`v-memo`	缓存渲染结果（优化性能）	`<div v-memo="[value]">{{ value }}</div>`

二、组件相关属性（Options & Props）

2.1 组件选项

属性	说明	示例
`props`	定义组件接收的 props（支持类型校验）	`props: { title: String }`
`emits`	声明组件触发的事件（推荐显式定义）	`emits: ['update:modelValue']`
`setup()`	Composition API 入口（替代 `data`/`methods`）	`setup(props, { emit }) { ... }`
`computed`	计算属性（基于响应式依赖缓存）	`computed: { fullName() { ... } }`
`watch`	监听数据变化	`watch: { count(newVal) { ... } }`

2.2 特殊属性

属性	说明	示例
`ref`	注册模板引用（通过 `ref` 变量访问）	`<input ref="inputRef">` → `const inputRef = ref(null)`
`key`	强制更新元素/组件（常用于 `v-for`）	`<Component :key="id" />`
`is`	动态组件	`<component :is="currentComponent" />`

三、Composition API 核心方法

方法	说明	示例
`ref()`	创建响应式基本类型数据	`const count = ref(0)`
`reactive()`	创建响应式对象	`const state = reactive({ name: 'Alice' })`
`computed()`	创建计算属性	`const double = computed(() => count.value * 2)`
`watch()`	监听响应式数据变化	`watch(count, (newVal) => { ... })`
`watchEffect()`	自动追踪依赖的副作用函数	`watchEffect(() => console.log(count.value))`
`provide()` / `inject()`	跨组件传递数据（依赖注入）	`provide('key', value)`→ `const val = inject('key')`
`toRef()` / `toRefs()`	将响应式对象属性转为 `ref`	`const { name } = toRefs(state)`

四、生命周期钩子

选项式 API

钩子	触发时机
`beforeCreate`	实例初始化前
`created`	实例创建完成（数据已初始化）
`beforeMount`	挂载到 DOM 前
`mounted`	挂载完成（可访问 DOM）
`beforeUpdate`	数据更新前（DOM 未重新渲染）
`updated`	数据更新后（DOM 已重新渲染）
`beforeUnmount`	实例销毁前
`unmounted`	实例销毁完成

Composition API

钩子函数	等价选项式钩子	示例
`onBeforeMount`	`beforeMount`	`onBeforeMount(() => { ... })`
`onMounted`	`mounted`	`onMounted(() => { ... })`
`onBeforeUpdate`	`beforeUpdate`	`onBeforeUpdate(() => { ... })`
`onUpdated`	`updated`	`onUpdated(() => { ... })`
`onBeforeUnmount`	`beforeUnmount`	`onBeforeUnmount(() => { ... })`
`onUnmounted`	`unmounted`	`onUnmounted(() => { ... })`

五、路由与状态管理（Vue Router & Pinia）

Vue Router 常用方法

方法/属性	说明	示例
`useRouter()`	获取路由实例	`const router = useRouter()`
`useRoute()`	获取当前路由信息	`const route = useRoute()`
`router.push()`	导航到新页面	`router.push('/home')`
`router.replace()`	替换当前页面（无历史记录）	`router.replace('/login')`
`router.go()`	前进/后退历史记录	`router.go(-1)`

Pinia 核心 API

方法	说明	示例
`defineStore()`	创建 Store	`const useStore = defineStore('id', { ... })`
`store.$patch()`	批量更新状态	`store.$patch({ count: 10 })`
`store.$reset()`	重置状态到初始值	`store.$reset()`
`store.$subscribe()`	监听状态变化	`store.$subscribe((mutation) => { ... })`

六、实用代码片段

全局状态管理（Pinia）

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
});

// 组件中使用
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
counter.increment();

表单验证（v-model + 修饰符）

<template>
  <input v-model.trim="username" @blur="validateUsername">
</template>

<script setup>
const username = ref('');
const validateUsername = () => {
  if (!username.value) alert('用户名不能为空');
};
</script>

API 请求封装

import { ref } from 'vue';
import axios from 'axios';

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  axios.get(url)
    .then(res => data.value = res.data)
    .catch(err => error.value = err);

  return { data, error };
}