Vue3 筆記 | Vue 進階篇

有進階指令表示有基礎指令，在最早的第一篇 Vue3 筆記有提到 v-bind，然後我就轟轟轟地連續數篇 Vue3 筆記飛過然後沒有再專門談過 vue 指令，但時不時還是在我的範例中看到使用，比如 v-on。

主要是這些指令拉出來單獨開一篇個人覺得沒必要，我又不是 vue 官方文件 (笑。

1. v-bind：綁定屬性。
2. v-on：綁定事件。
3. v-if, v-show：條件渲染。
4. v-for：迭代渲染。
5. watch, watchEffect：監聽。
6. slot：模板插槽。

Provide-Inject

雖然之前講過 Vue 專案中要共用資料可以用 pinia，但假設現在我們不會 pinia 但仍然要把某組件的資料共享給比如它的曾曾曾曾...子孫組件，可以使用 Vue 原生提供的 provide-inject 方法來傳遞，避免 props 一堆到死的問題。

我們要在父組件引用 provide：

<script setup>
import { ref, provide } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

const greeting = ref('hello world')

provide('msg', greeting)
</script>

<template>
  <HelloWorld />
</template>

在子組件引用 inject：

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

const msg = inject('msg')
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

之後就可以看到畫面成功渲染 Hello World!

自定義指令

我們可以自行定義 v- 指令來幫助我們簡化程式碼快速開發。

以官網的例子來說，我們可以在 main.js 掛上一個自定義的 hook，然後就可以在組件中使用它：

Main.js：

app.directive('color', (el, binding) => { 
  el.style.color = binding.value
})

App.vue：

<div v-color="'red'">maybe will change color</div>

可以看到這個 <div> 成功套用我們自定義的 v-color 內部邏輯。

Transition

這是一個 Vue 提供的內置組件，可以快速地製作一些轉場動畫。基本上 Transition 的運作基於 6 個內建的 css class：

1. v-enter-from：動畫起始階段。
2. v-enter-active：動畫運作階段。
3. v-enter-to：動畫結束階段。
4. v-leave-from：動畫消失起始階段。
5. v-leave-active：動畫消失運作階段。
6. v-leave-to：動畫消失結束階段

看一下官方提供的範例 code 會更清楚這些 class 的書寫邏輯：

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

const show = ref(true)
</script>

<template name="hello">
 <button @click="show = !show">click</button>
 <Transition>
  <p v-if="show">hello</p>
 </Transition>
</template>

<style scoped>
.hello-enter-active,
.hello-leave-active{
  transition: opacity 0.5s ease;;
}

.hello-enter-from,
.hello-leave-to{
  opacity: 0;
}

.hello-enter-to,
.hello-leave-from{
  opacity: 1;
}
</style>

總而言之，包在 Transition 內部的元素或組件都可以享受到這樣一個轉場的服務，更多進階操作建議看官網。

而如果是要渲染像 list 這類的內容，我指比如 v-for 之類的，可以使用 Transition 的兄弟 TransitionGroup。

KeepAlive

這個內置組件幫助我們在切換元件時，仍然保留其內部狀態不被重置。用官方的 code 一步步拆解。

首先有 A、B 兩個元件，內部各自都帶有自己的狀態：

CompA：

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

const count = ref(0)
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }}</span>
  <button @click="count++">+</button>
</template>

CompB：

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

<template>
  <p>Current component: B</p>
  <span>Message is: {{ msg }}</span>
  <input v-model="msg">
</template>

通常來說，當這兩個組件在切換時因為會從 DOM 上被卸載，所以重新載入時一切會回歸預設狀態，但如果在父組件中用 KeepAlive 把他們包起來就可以讓他們的狀態不被解除：

<script setup>
import { shallowRef } from 'vue'
import CompA from './components/CompA.vue'
import CompB from './components/CompB.vue'

const current = shallowRef(CompA)
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <KeepAlive>
      <component :is="current"></component>
    </KeepAlive>
  </div>
</template>

Teleport

這個內置組件可以想像成一個傳送門，可以咻~地把一個元件深層的模板給傳送指定的 DOM 位置。

這項功能比較常用在建立彈出視窗等元件上。想像一下這個元件被很多父元件層層包裹，那有時難免它的 css 位置也會受到干擾，而 Teleport 就是來解決這樣的事情。通俗點說，就是避免跑版 www

舉例來說，這段 code 的意思就是把 Teleport 內部的東西給傳送到 body 上：

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

參考資料

1. Vue 官方文件