從 Vue2 到 Vue3，那些可能讓你眼前一亮的小細(xì)節(jié)

作者：前端阿飛V 2022-12-09 09:39:20

今天就給大家分享 Vue3 實(shí)戰(zhàn)過程中，一些可能讓你眼前一亮的小細(xì)節(jié)。用的好的話，不僅可以提升工作效率，同時(shí)也能提高程序運(yùn)行的性能。

相信很多兄弟都知道 Vue3 的那些新特性，如基于 Proxy 的響應(yīng)式系統(tǒng)、編譯器優(yōu)化、Composition-API 等等，但你知道 Vue3 中有哪些小細(xì)節(jié)是和 Vue2 不同的嗎？

今天就給大家分享 Vue3 實(shí)戰(zhàn)過程中，一些可能讓你眼前一亮的小細(xì)節(jié)。用的好的話，不僅可以提升工作效率，同時(shí)也能提高程序運(yùn)行的性能。話不多說，就是干！

作用域樣式 style

全局選擇器

在 Vue2 組件中，設(shè)置一個(gè)全局樣式，我們通常是新建一個(gè) <style> 標(biāo)簽，如：

<style scoped>
/* ... */
</style>

<style>
.red {
  color: red; 
} 
</style>

而在 Vue3 中，可以在作用域樣式中使用 :global 這個(gè)偽類：

<style scoped>
/* .red 選擇器將作用于全局 */
:global(.red) {
  color: red;
}
</style>

插槽選擇器

默認(rèn)情況下，作用域樣式不會(huì)影響到 <slot/> 渲染出來的內(nèi)容，因?yàn)樗鼈儽徽J(rèn)為是父組件所持有并傳遞進(jìn)來的。而使用 :slotted 偽類可以打破這種情況。

<template>
  <div class="child">
    <slot
  </div>
</template>

<style scoped>
/* .red 選擇器將作用于 <slot /> 渲染出來的內(nèi)容 */
:slotted(.red) {
  color: red;
}
</style>

深度選擇器

Vue2 中樣式穿透，一般是使用 ::v-deep 或 /deep/，而 Vue3 中我們可以使用 :deep 這個(gè)偽類：

<template>
<div class="parent">
  <ChildView
</div>
</template>

<style scoped>
/* .red 選擇器將作用于 <ChildView /> 組件 */
.parent :deep(.red) {
  color: red;
}
</style>

細(xì)心的兄弟會(huì)發(fā)現(xiàn)，以上選擇器的風(fēng)格是統(tǒng)一的，都是使用偽類的方式來實(shí)現(xiàn)。這樣書寫起來更加優(yōu)雅，同時(shí)也更加方便記憶。

style 中的 v-bind

組件的 <style> 內(nèi)支持使用 v-bind 綁定動(dòng)態(tài)的組件狀態(tài)：

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

const color = ref('red')
</script>

<template>
  <p>hello</p>
</template>

<style scoped>p {
  color: v-bind('color');
}
</style>

既然可以綁定動(dòng)態(tài)的組件狀態(tài)，那么切換主題就變得非常簡單了：

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

const theme = reactive({})
setWhiteTheme()
function setWhiteTheme() {
  theme.fontColor = '#000'
  theme.backgroundColor = '#fff'
}
function setBlackTheme() {
  theme.fontColor = '#fff'
  theme.backgroundColor = '#000'
}
</script>

<template>
  <div class="main">
    <button @click="setWhiteTheme">白色主題</button>
    <button @click="setBlackTheme">黑色主題</button>
    <div class="content">
      <div>Hello Vue3!</div>
    </div>
  </div>
</template>

<style scoped>
.content {
  color: v-bind('theme.fontColor');
  background-color: v-bind('theme.backgroundColor');
}
</style>

雖然尤大大推薦使用 <script setup> ，但有時(shí)候還得用到普通的 <script> ，這時(shí)候我們可以混合起來使用。以下是用到普通 <script> 的場景：

聲明無法在 <script setup> 中聲明的選項(xiàng)，例如 inheritAttrs 或插件的自定義選項(xiàng)。

<script>
export default {
 inheritAttrs: false, // 禁止父組件傳遞過來的屬性 “透傳” 到子組件的根節(jié)點(diǎn)
 customOptions: {} // 插件的自定義選項(xiàng)
}
</script>

<script setup>
// ...
</script>

聲明模塊的具名導(dǎo)出。如果你想修改組件的名字，并且讓它在 devtools 中生效，那么就要用到具名導(dǎo)出。

<!-- Comp.vue -->
<script>
export default {
 name: 'ElComp'
}
</script>

<template>
 <div>child comp</div>
</template>

<script setup>
// ...
</script>

效果如下：

這個(gè)功能平時(shí)用的少，但在封裝組件時(shí)非常有用，可以讓你少寫不少代碼。

運(yùn)行只需要在模塊作用域執(zhí)行一次的副作用，或是創(chuàng)建單例對(duì)象。

<script>
// 在模塊作用域下執(zhí)行 (僅一次)
runSideEffectOnce()
</script>

<script setup>
// 在 setup() 作用域中執(zhí)行 (每次組件實(shí)例被創(chuàng)建的時(shí)候都會(huì)執(zhí)行)
</script>

v-model

Vue2 中組件的雙向綁定采用的是 v-model 或 .snyc 修飾符，兩種寫法多少有點(diǎn)重復(fù)。Vue3 中統(tǒng)一使用 v-model 進(jìn)行處理，并且可以和多個(gè)數(shù)據(jù)進(jìn)行綁定，如 v-model:foo、v-model:bar 。

v-model 等價(jià)于 :model-value="someValue" 和 @update:model-value="someValue = $event"。

v-model:foo 等價(jià)于 :foo="someValue" 和 @update:foo="someValue = $event"。

下面就是一個(gè)父子組件之間雙向綁定的例子：

<!-- 父組件 -->
<script setup>
import ChildView from './ChildView.vue'
import { ref } from 'vue'

const msg = ref('hello vue3!')
</script>

<template>
  <ChildView v-model="msg" />
</template>

<!-- 子組件 -->
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div @click="emit('update:modelValue', 'hi vue3！')">{{ modelValue }}</div>
</template>

子組件可以結(jié)合 input 使用：

<!-- 子組件 -->
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', $event.target.value)" />
</template>

如果你覺得上面的模板比較繁瑣，也可以結(jié)合 computed 一起使用：

<!-- 子組件 -->
<script setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const newValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

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

v-memo

v-memo 用來緩存一個(gè)模板的子樹，在元素和組件上都可以使用。為了實(shí)現(xiàn)緩存，該指令需要傳入一個(gè)固定長度的依賴值數(shù)組進(jìn)行比較。如果數(shù)組里的每個(gè)值都與最后一次的渲染相同，那么整個(gè)子樹的更新將被跳過。舉例來說：

<div v-memo="[valueA, valueB]">
  ...
</div>

當(dāng)組件重新渲染時(shí)，如果 valueA 和 valueB 的值都沒有變化，那么這個(gè) <div> 及其子項(xiàng)的所有更新都會(huì)被跳過。并且虛擬 DOM 的 vnode 創(chuàng)建也會(huì)被跳過，因?yàn)榫彺娴?nbsp;vnode 可以被重新使用。

Vue3 已經(jīng)做了靜態(tài)標(biāo)記，靜態(tài)的元素或?qū)傩詴?huì)跳過更新。那么 v-memo 的使用場景是什么呢？

v-memo 僅用于性能至上場景中的微小優(yōu)化，最常見的情況可能是有助于渲染海量 v-for 列表 (長度超過 1000 的情況)：

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

當(dāng)組件的 selected 狀態(tài)改變，默認(rèn)會(huì)重新創(chuàng)建大量的 vnode，盡管絕大部分都跟之前是一模一樣的。v-memo 用在這里本質(zhì)上是在說“只有當(dāng)該項(xiàng)的被選中狀態(tài)改變時(shí)才需要更新”。這使得每個(gè)選中狀態(tài)沒有變的項(xiàng)能完全重用之前的 vnode 并跳過差異比較。注意這里 memo 依賴數(shù)組中并不需要包含 item.id，因?yàn)?Vue 也會(huì)根據(jù) item 的 :key 進(jìn)行判斷。

注意：當(dāng)搭配 v-for 使用 v-memo，確保兩者都綁定在同一個(gè)元素上。v-memo 不能用在 v-for 內(nèi)部使用。

teleport

<Teleport> 是一個(gè)內(nèi)置組件，它可以將一個(gè)組件內(nèi)部的一部分模板“傳送”到該組件的 DOM 結(jié)構(gòu)外層的位置去。

最常見的場景就是全屏的模態(tài)框。理想情況下，觸發(fā)模態(tài)框的按鈕和模態(tài)框是在同一個(gè)組件中，他們一起被渲染在 DOM 結(jié)構(gòu)里很深的地方。這是一個(gè)簡單模態(tài)框 <MyModal> 的實(shí)現(xiàn)：

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

const open = ref(false)
</script>

<template>
  <button @click="open = true">Open Modal</button>

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

<style scoped>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>

使用這個(gè) <MyModal> 組件時(shí)，會(huì)存在一些潛在問題：

position: fixed 能夠相對(duì)于瀏覽器窗口定位有一個(gè)條件，那就是不能有任何祖先元素設(shè)置了 transform、perspective 或者 filter 樣式屬性。也就是說如果我們想要用 CSS transform 為祖先節(jié)點(diǎn) <div class="outer"> 設(shè)置動(dòng)畫，就會(huì)不小心破壞模態(tài)框的布局！
這個(gè)模態(tài)框的 z-index 受限于它的容器元素。如果有其他元素與 <div class="outer"> 重疊并有更高的 z-index，則它會(huì)覆蓋住我們的模態(tài)框。

<Teleport> 提供了一個(gè)“傳送”的方式來解決此類問題，讓我們不再擔(dān)心 DOM 結(jié)構(gòu)的問題。我們來用 <Teleport> 改寫一下 <MyModal>：

<button @click="open = true">Open Modal</button>

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