Vue 3 速查

Vue 3 采用 组合式 API（Composition API） 为主，模板编译为渲染函数，运行时按需引入。

快速上手

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

onMounted(() => {
  console.log('mounted')
})
</script>

<template>
  <button @click="count++">count: {{ count }}</button>
  <p>double: {{ double }}</p>
</template>

核心概念

概念	说明
ref / reactive	响应式状态，模板中用 .value 解包（ref）
computed	计算属性，依赖不变则缓存
watch / watchEffect	侦听副作用
defineProps / defineEmits	组件传参与事件
v-model	双向绑定，组件内用 modelValue + update:modelValue

常见指令

• v-if / v-else / v-show：条件渲染
• v-for：列表渲染，必须绑定唯一 :key
• @event / :prop：事件与属性绑定简写
• .once .prevent .stop：事件修饰符

常见坑

• 解构响应式对象丢失响应性 → 用 toRefs；
• watch 默认不深度侦听 → 加 { deep: true }；
• Props 不可直接修改 → 通过 emit 通知父组件。