Vue 3 核心语法速查

一、基础使用

1. 创建应用

```javascript

// main.js

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

app.mount('#app')

```

2. 模板语法

```vue

<p>{{ message }}</p>

{{ index }} - {{ item.name }}

</li>

{{ key }}: {{ value }}

</div>

</template>

```

3. 组件定义

```vue

// Composition API (推荐)

import { ref, reactive, computed, watch } from 'vue'

// 响应式数据

const count = ref(0)

const state = reactive({

version: '3.0'

})

// 计算属性

const fullName = computed(() => {

return ` ${state.name}$ {state.version}`

})

// 方法

const increment = () => {

count.value++

}

// 侦听器

watch(count, (newValue, oldValue) => {

console.log(`count变化: ${oldValue} -\>$ {newValue}`)

})

// 立即执行的侦听器

watch(

() => state.name,

(newValue) => {

console.log(`name变化: ${newValue}`)

{ immediate: true }

)

// 侦听多个数据源

watch([count, () => state.name], ([newCount, newName]) => {

console.log(newCount, newName)

})

// 生命周期

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {

console.log('组件已挂载')

})

onUnmounted(() => {

console.log('组件已卸载')

})

</script>

<button @click="increment">{{ count }}</button>

<p>{{ fullName }}</p>

</template>

```

二、组件通信

1. Props 和 Emits

```vue

// 定义props

const props = defineProps({

title: String,

type: Number,

default: 0,

required: true

}

})

// 定义emits

const emit = defineEmits(['update:count', 'customEvent'])

const handleClick = () => {

emit('update:count', props.count + 1)

emit('customEvent', 'data')

}

</script>

<h2>{{ title }}</h2>

<p>Count: {{ count }}</p>

</template>

import { ref } from 'vue'

import Child from './Child.vue'

const count = ref(0)

const handleCustomEvent = (data) => {

console.log('收到数据:', data)

}

</script>

<Child

title="子组件"

:count="count"

@update:count="count = $event"

@custom-event="handleCustomEvent"

</template>

```

2. 组件引用和Expose

```vue

import { ref, defineExpose } from 'vue'

const inputRef = ref(null)

const value = ref('')

const focus = () => {

inputRef.value?.focus()

}

// 暴露给父组件的方法

defineExpose({

focus,

value

})

</script>

</template>

import { ref } from 'vue'

import MyInput from './MyInput.vue'

const inputRef = ref()

const handleFocus = () => {

inputRef.value.focus()

console.log(inputRef.value.value)

}

</script>

</template>

```

3. Provide/Inject

```vue

import { provide, ref } from 'vue'

const theme = ref('dark')

provide('theme', theme)

provide('changeTheme', (newTheme) => {

theme.value = newTheme

})

</script>

import { inject } from 'vue'

const theme = inject('theme')

const changeTheme = inject('changeTheme')

</script>

```

三、响应式系统

1. ref 和 reactive

```javascript

import { ref, reactive, toRefs } from 'vue'

// ref: 用于基本类型

const count = ref(0)

console.log(count.value) // 访问值

// reactive: 用于对象

const state = reactive({

})

// 解构响应式对象

const { count, name } = toRefs(state)

// 现在 count 和 name 都是 ref

// 只读响应式对象

import { readonly } from 'vue'

const readOnlyState = readonly(state)

// 浅层响应式

import { shallowRef, shallowReactive } from 'vue'

const shallow = shallowReactive({ nested: { count: 0 } })

// nested 的变化不会触发更新

```

2. 响应式工具

```javascript

import { isRef, unref, toRef, markRaw } from 'vue'

// 检查是否是 ref

isRef(count) // true

// 获取值（如果是ref则.value，否则返回本身）

const value = unref(maybeRef)

// 将响应式对象属性转为 ref

const countRef = toRef(state, 'count')

// 标记为不可响应式

const rawObject = markRaw({ nested: {} })

```

四、计算属性和侦听器

1. 计算属性

```javascript

import { computed } from 'vue'

// 只读计算属性

const fullName = computed(() => {

return ` ${firstName.value}$ {lastName.value}`

})

// 可写计算属性

const writableFullName = computed({

get() {

return ` ${firstName.value}$ {lastName.value}`

set(newValue) {

const [first, last] = newValue.split(' ')

firstName.value = first

lastName.value = last

}

})

```

2. 侦听器

```javascript

import { watch, watchEffect } from 'vue'

// 基础侦听

watch(count, (newValue, oldValue) => {

// 当count变化时执行

})

// 侦听多个源

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {

// 当任意一个变化时执行

})

// 深度侦听对象

watch(

() => state.user,

(newUser) => {

console.log(newUser)

{ deep: true }

)

// 立即执行并清理副作用

watchEffect((onCleanup) => {

console.log(count.value)

// 清理函数

onCleanup(() => {

console.log('清理')

})

// 控制侦听时机

watch(

count,

() => {

console.log('count changed')

{ flush: 'post' } // 或 'pre'、'sync'

)

```

五、生命周期

```javascript

import {

onBeforeMount,

onMounted,

onBeforeUpdate,

onUpdated,

onBeforeUnmount,

onUnmounted,

onErrorCaptured,

onActivated,

onDeactivated

} from 'vue'

onBeforeMount(() => {

// 挂载前

})

onMounted(() => {

// 挂载后 - 可以访问DOM

})

onBeforeUpdate(() => {

// 更新前

})

onUpdated(() => {

// 更新后

})

onBeforeUnmount(() => {

// 卸载前

})

onUnmounted(() => {

// 卸载后 - 清理工作

})

onErrorCaptured((err, instance, info) => {

// 捕获子组件错误

return false // 阻止错误继续向上传播

})

// KeepAlive组件特有

onActivated(() => {

// 激活时

})

onDeactivated(() => {

// 停用时

})

```

六、自定义指令

```javascript

// 全局指令

app.directive('focus', {

mounted(el) {

el.focus()

}

})

// 局部指令

const vMyDirective = {

mounted(el, binding) {

// binding.value - 指令的值

// binding.oldValue - 之前的值（仅在beforeUpdate和updated中可用）

// binding.arg - 传给指令的参数

// binding.modifiers - 修饰符对象

updated(el, binding) {

// 更新时调用

beforeUnmount(el) {

// 卸载前清理

}

</script>

</template>

```

七、内置组件

1. Transition

```vue

<p v-if="show">Hello</p>

</Transition>

<style>

.fade-enter-active,

.fade-leave-active {

transition: opacity 0.5s;

}

.fade-enter-from,

.fade-leave-to {

opacity: 0;

}

</style>

</template>

```

2. TransitionGroup

```vue

</li>

</TransitionGroup>

</template>

```

3. KeepAlive

```vue

</KeepAlive>

</template>

```

4. Teleport

```vue

<button @click="modalOpen = true">打开模态框</button>

<p>模态框内容</p>

</div>

</Teleport>

</template>

```

5. Suspense

```vue

</template>

</template>

</Suspense>

</template>

const { data } = await fetch('/api/data').then(r => r.json())

</script>

```

八、组合式函数

```javascript

// useMouse.js

import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {

const x = ref(0)

const y = ref(0)

function update(event) {

x.value = event.pageX

y.value = event.pageY

}

onMounted(() => window.addEventListener('mousemove', update))

onUnmounted(() => window.removeEventListener('mousemove', update))

return { x, y }

}

// 在组件中使用

import { useMouse } from './useMouse'

const { x, y } = useMouse()

</script>

</template>

```

九、TypeScript支持

```vue

// 类型定义

interface User {

id: number

age?: number

}

// 带类型的ref

import { ref } from 'vue'

const user = ref<User>({

id: 1,

})

// 带类型的props

const props = defineProps<{

title: string

count?: number

users: User[]

}>()

// 带类型的emits

const emit = defineEmits<{

(e: 'update:count', value: number): void

(e: 'select', user: User): void

}>()

// 带类型的computed

import { computed } from 'vue'

const userName = computed<string>(() => user.value.name)

// 带类型的provide/inject

import { provide, inject } from 'vue'

const key = Symbol() as InjectionKey<string>

provide(key, 'value')

const value = inject(key)

</script>

```

十、状态管理（Pinia）

```javascript

// store/user.js

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {

state: () => ({

age: 25,

token: null

}),

getters: {

// 类似计算属性

isAdult: (state) => state.age >= 18,

// 使用其他getter

greeting: (state) => {

return `Hello, ${state.name}`

}

actions: {

// 同步操作

updateName(newName) {

this.name = newName

// 异步操作

async login(credentials) {

const response = await api.login(credentials)

this.token = response.token

}

})

// 在组件中使用

import { useUserStore } from '@/stores/user'

import { storeToRefs } from 'pinia'

const userStore = useUserStore()

// 直接修改状态

userStore.name = '李四'

// 使用action

userStore.updateName('王五')

// 使用getter

console.log(userStore.isAdult)

// 解构并保持响应式

const { name, age } = storeToRefs(userStore)

</script>

```

十一、路由（Vue Router 4）

```javascript

// router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [

{

path: '/',

component: () => import('../views/Home.vue')

{

path: '/user/:id',

component: () => import('../views/User.vue'),

props: true, // 将params作为props传递

meta: { requiresAuth: true }

{

path: '/about',

component: () => import('../views/About.vue'),

children: [

{

path: 'info',

component: () => import('../views/AboutInfo.vue')

}

]

}

]

const router = createRouter({

history: createWebHistory(),

routes

})

// 导航守卫

router.beforeEach((to, from, next) => {

if (to.meta.requiresAuth && !isAuthenticated) {

next('/login')

} else {

next()

}

})

```

```vue

import { useRoute, useRouter } from 'vue-router'

const route = useRoute()

const router = useRouter()

// 获取路由参数

console.log(route.params.id)

console.log(route.query.search)

// 导航

router.push('/home')

router.push({ name: 'User', params: { id: 1 } })

router.replace('/login')

router.go(-1)

// 编程式导航

const navigate = () => {

router.push({

path: '/user',

query: { search: 'vue' }

})

}

</script>

<router-link to="/">首页</router-link>

<router-link :to="{ name: 'User', params: { id: 1 } }">

用户

</router-link>

<router-view />

<router-view name="sidebar" />

</template>

```

十二、实用技巧

1. 动态组件

```vue

import { shallowRef } from 'vue'

import Home from './Home.vue'

import About from './About.vue'

const components = {

Home,

About

}

const currentComponent = shallowRef(Home)

</script>

</template>

```

2. 自定义v-model

```vue

const props = defineProps(['modelValue'])

const emit = defineEmits(['update:modelValue'])

const updateValue = (event) => {

emit('update:modelValue', event.target.value)

}

</script>

</template>

<CustomInput

:modelValue="text"

@update:modelValue="text = $event"

</template>

```

3. 属性透传

```vue

按钮

</MyButton>

</template>

</button>

</template>

// 禁用属性继承

export default {

inheritAttrs: false

}

</script>

```

4. 性能优化

```javascript

// 1. 使用shallowRef/shallowReactive

import { shallowRef } from 'vue'

const largeObject = shallowRef({ /* 大数据 */ })

// 2. 使用v-once

<div v-once>{{ staticContent }}</div>

</template>

// 3. 使用v-memo (Vue 3.2+)

</div>

// 4. 使用异步组件

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>

import('./components/AsyncComponent.vue')

)

```

**快速记忆要点：**

**组合式API是核心** - `ref()`, `reactive()`, `computed()`, `watch()`
**`<script setup>` 简化代码** - 自动导出，无需`return`
**TypeScript友好** - 完整的类型支持
**响应式系统改进** - 更精确的依赖追踪
**更小的包体积** - Tree-shaking支持更好
**更好的性能** - 更快的渲染速度和内存使用
**新的内置组件** - `Teleport`, `Suspense`
**多个根节点** - Fragment支持