Vue 是一套用于構建用戶界面的漸進式框架

• (cn.vuejs.org)
• (router.vuejs.org)
• Vue 2 備忘清單

注意：Vue 3.x 版本對應 Vue Router 4.x 路由版本

<script src="//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 '//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 語法 (即雙大括號)，每次 msg 屬性更改時它也會同步更新

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

簡寫

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

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

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

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

<!-- 這是一個語句，而非表達式 -->
{{ var a = 1 }}
<!-- 條件控制也不支持，請使用三元表達式 -->
{{ 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>
<!-- 簡寫 -->
<a :href="url"> ... </a>

<a v-on:click="doSomething"> ... </a>
<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

<a v-bind:[attributeName]="url"> ... </a>
<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>

這里的 attributeName 會作為一個 JS 表達式被動態執行

<a v-on:[eventName]="doSomething"> ... </a>
<!-- 簡寫 -->
<a @[eventName]="doSomething">

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

.prevent 修飾符會告知 v-on 指令對觸發的事件調用 event.preventDefault()

v-on:submit.prevent="onSubmit"
──┬─ ─┬──── ─┬─────  ─┬──────
  ┆   ┆      ┆        ╰─ Value 解釋為JS表達式
  ┆   ┆      ╰─ Modifiers 由前導點表示
  ┆   ╰─ Argument 跟隨冒號或速記符號
  ╰─ Name 以 v- 開頭使用速記時可以省略

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

import { defineComponent, reactive } from 'vue';

// `defineComponent`用于IDE推導類型
export default defineComponent({
  // setup 用于組合式 API 的特殊鉤子函數
  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++;
    }

    // 不要忘記同時暴露 increment 函數
    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 語法糖用于簡化代碼，尤其是當需要暴露的狀態和方法越來越多時

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

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

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

子組件定義需要的參數

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

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

父組件參入參數

<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 的函數

<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>

子組件對父組件暴露方法

<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>

父組件調用子組件的方法

import type { InjectionKey, Ref } from 'vue'

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

在應用中使用 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>

父組件為后代組件提供數據

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

const value = inject(ProvideKey)
</script>

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

后代組件注入父組件提供的數據

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

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

ref 會根據初始化時的值推導其類型：

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 指引'
})

你還可以通過泛型參數顯式指定類型：

const double = computed<number>(() => {
  // 若返回值不是 number 類型則會報錯
})

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

const key = Symbol() as InjectionKey<string>
// 若提供的是非字符串值會導致錯誤
provide(key, 'foo')
// foo 的類型：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 內置的 InstanceType 工具類型來獲取其實例類

<!-- 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) {
      // 執行運行時校驗
      return payload.bookName.length > 0
    }
  },
  methods: {
    onSubmit() {
      this.$emit('addBook', {
        bookName: 123 // 類型錯誤
      })
      // 類型錯誤
      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，提供了一些自定義的組件選項，比如 beforeRouteEnter：

import { defineComponent } from 'vue'

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

如果沒有確切的類型標注，這個鉤子函數的參數會隱式地標注為 any 類型。我們可以為 ComponentCustomOptions 接口擴展自定義的選項來支持：

import { Route } from 'vue-router'

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