Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架

• Vue 3.x 官方文檔 (cn.vuejs.org)
• Vue Router 4.x 官方文檔 (router.vuejs.org)
• Vue 2 備忘清單

注意：Vue 3.x 版本對(duì)應(yīng) Vue Router 4.x 路由版本

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  const { createApp, ref } = Vue
  createApp({
    setup() {
      const message = ref("Hello Vue3")
      return {
        message
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message, ref }}</div>
<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    setup() {
      const message = ref("Hello Vue3")
      return {
        message
      }
    }
  }).mount('#app')
</script>

<span>Message: {{ msg }}</span>

使用的是 Mustache 語(yǔ)法 (即雙大括號(hào))，每次 msg 屬性更改時(shí)它也會(huì)同步更新

<div v-bind:id="dynamicId"></div>

簡(jiǎn)寫(xiě)

<div :id="dynamicId"></div>

<button :disabled="isButtonDisabled">
  Button
</button>

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

<!-- 這是一個(gè)語(yǔ)句，而非表達(dá)式 -->
{{ var a = 1 }}
<!-- 條件控制也不支持，請(qǐng)使用三元表達(dá)式 -->
{{ if (ok) { return message } }}

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

<p v-if="seen">Now you see me</p>

<a v-bind:href="url"> ... </a>
<!-- 簡(jiǎn)寫(xiě) -->
<a :href="url"> ... </a>

<a v-on:click="doSomething"> ... </a>
<!-- 簡(jiǎn)寫(xiě) -->
<a @click="doSomething"> ... </a>

<a v-bind:[attributeName]="url"> ... </a>
<!-- 簡(jiǎn)寫(xiě) -->
<a :[attributeName]="url"> ... </a>

這里的 attributeName 會(huì)作為一個(gè) JS 表達(dá)式被動(dòng)態(tài)執(zhí)行

<a v-on:[eventName]="doSomething"> ... </a>
<!-- 簡(jiǎn)寫(xiě) -->
<a @[eventName]="doSomething">

<form @submit.prevent="onSubmit">
  ...
</form>

.prevent 修飾符會(huì)告知 v-on 指令對(duì)觸發(fā)的事件調(diào)用 event.preventDefault()

v-on:submit.prevent="onSubmit"
──┬─ ─┬──── ─┬─────  ─┬──────
  ┆   ┆      ┆        ╰─ Value 解釋為JS表達(dá)式
  ┆   ┆      ╰─ Modifiers 由前導(dǎo)點(diǎn)表示
  ┆   ╰─ Argument 跟隨冒號(hào)或速記符號(hào)
  ╰─ Name 以 v- 開(kāi)頭使用速記時(shí)可以省略

<div>{{ state.count }}</div>

import { defineComponent, reactive } from 'vue';

// `defineComponent`用于IDE推導(dǎo)類(lèi)型
export default defineComponent({
  // setup 用于組合式 API 的特殊鉤子函數(shù)
  setup() {
    const state = reactive({ count: 0 });

    // 暴露 state 到模板
    return {
      state
    };
  },
});

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

import { defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({ count: 0 });

    function increment() {
      state.count++;
    }

    // 不要忘記同時(shí)暴露 increment 函數(shù)
    return {
      state,
      increment
    };
  },
})

<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

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

setup 語(yǔ)法糖用于簡(jiǎn)化代碼，尤其是當(dāng)需要暴露的狀態(tài)和方法越來(lái)越多時(shí)

<script setup>
import { defineProps } from 'vue';

// 這里可以將 `username` 解構(gòu)出來(lái)，
// 但是一旦解構(gòu)出來(lái)再使用，就不具備響應(yīng)式能力
defineProps({
  username: String
})
</script>

<template>
  <p>username: {{ username }}</p>
</template>

子組件定義需要的參數(shù)

<script setup>
const username = 'vue'
</script>

<template>
  <children :username="username" />
</template>

父組件參入?yún)?shù)

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['search'])
const keyword = ref('')
const onSearch = function() {
  emit('search', keyword.value)
}
</script>

<template>
  <input v-model="keyword" />
  <button @click="onSearch">search</button>
</template>

子組件定義支持 emit 的函數(shù)

<script setup>
const onSearch = function(keyword){
  console.log(keyword)
}
</script>

<template>
  <children @search="onSearch" />
</template>

父組件綁定子組件定義的事件

<script setup>
import { defineExpose, ref } from 'vue';

const keyword = ref('')
const onSearch = function() {
  console.log(keyword.value)
}

defineExpose({ onSearch })
</script>

<template>
  <input v-model="keyword" />
</template>

子組件對(duì)父組件暴露方法

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

const childrenRef = ref(null)
const onSearch = function() {
  childrenRef.value.onSearch()
}
</script>

<template>
  <children ref='childrenRef' />
  <button @click="onSearch">search</button>
</template>

父組件調(diào)用子組件的方法

import type { InjectionKey, Ref } from 'vue'

export const ProvideKey = Symbol() as InjectionKey<Ref<string>>

在應(yīng)用中使用 ProvideKey

<script setup lang="ts">
import { provide, ref } from 'vue'
import { ProvideKey } from './types'

const text = ref<string>('123')
provide(ProvideKey, text)
</script>

<template>
  <input v-model="text" />
</template>

父組件為后代組件提供數(shù)據(jù)

<script setup lang="ts">
import { inject } from 'vue'
import { ProvideKey } from './types'

const value = inject(ProvideKey)
</script>

<template>
  <h4>{{value}}</h4>
</template>

后代組件注入父組件提供的數(shù)據(jù)

<script setup lang="ts">
// 運(yùn)行時(shí)
const emit = defineEmits(['change', 'update'])

// 基于類(lèi)型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

ref 會(huì)根據(jù)初始化時(shí)的值推導(dǎo)其類(lèi)型：

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = ref('2020')

year.value = 2020 // 成功！

import { reactive } from 'vue'

interface Book {
  title: string
  year?: number
}

const book: Book = reactive({
  title: 'Vue 3 指引'
})

你還可以通過(guò)泛型參數(shù)顯式指定類(lèi)型：

const double = computed<number>(() => {
  // 若返回值不是 number 類(lèi)型則會(huì)報(bào)錯(cuò)
})

import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'

const key = Symbol() as InjectionKey<string>
// 若提供的是非字符串值會(huì)導(dǎo)致錯(cuò)誤
provide(key, 'foo')
// foo 的類(lèi)型：string | undefined
const foo = inject(key)

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const el = ref<HTMLInputElement | null>(null)

onMounted(() => {
  el.value?.focus()
})
</script>

<template>
  <input ref="el" />
</template>

<!-- MyModal.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const isContentShown = ref(false)
const open = 
      () => (isContentShown.value = true)

defineExpose({
  open
})
</script>

使用 TypeScript 內(nèi)置的 InstanceType 工具類(lèi)型來(lái)獲取其實(shí)例類(lèi)

<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'

type Modal = InstanceType<typeof MyModal>

const modal = ref<Modal | null>(null)

const openModal = () => {
  modal.value?.open()
}
</script>

import { defineComponent } from 'vue'

type Payload = { bookName: string }

export default defineComponent({
  emits: {
    addBook(payload: Payload) {
      // 執(zhí)行運(yùn)行時(shí)校驗(yàn)
      return payload.bookName.length > 0
    }
  },
  methods: {
    onSubmit() {
      this.$emit('addBook', {
        bookName: 123 // 類(lèi)型錯(cuò)誤
      })
      // 類(lèi)型錯(cuò)誤
      this.$emit('non-declared-event')
    }
  }
})

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleChange(event: Event) {
      console.log((event.target as HTMLInputElement).value)
    }
  }
})

某些插件，比如 vue-router，提供了一些自定義的組件選項(xiàng)，比如 beforeRouteEnter：

import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // ...
  }
})

如果沒(méi)有確切的類(lèi)型標(biāo)注，這個(gè)鉤子函數(shù)的參數(shù)會(huì)隱式地標(biāo)注為 any 類(lèi)型。我們可以為 ComponentCustomOptions 接口擴(kuò)展自定義的選項(xiàng)來(lái)支持：

import { Route } from 'vue-router'

declare module 'vue' {
  interface ComponentCustomOptions {
    beforeRouteEnter?(
      to: Route,
      from: Route,
      next: () => void
    ): void
  }
}