Vue.js——組件基礎

選項式API和組合式API

選項式API

組合式API

語法糖

選項式API和組合式API的關系

生命周期函數

組合式API的生命周期函數

選項式API的生命周期函數

組件的注冊和引用

注冊組件

全局注冊

局部注冊

引用組件

解決組件之間的樣式沖突

scoped屬性

深度選擇器

父組件向子組件傳遞數據

聲明props

靜態綁定props

動態綁定props

字符串類型數據

數字類型數據

布爾值類型數據

數組類型數據

對象類型數據

props 單項數據流

驗證props

基礎類型檢查

必填項的校驗

屬性默認值

自定義驗證函數

子組件向父組件傳遞數據

在子組件中聲明自定義事件

在子組件中觸發自定義事件

在父組件中監聽自定義事件

跨級組件之間的數據傳遞

provide()

inject（）函數

動態組件

定義動態組件

利用KeepAlive組件實現組件緩存

組件緩存相關的生命周期函數

KeepAlive組件的常用屬性

插槽

定義插槽

使用插槽

具名插槽

作用域插槽

定義數據

接收數據

自定義指令

引用靜態資源

引用public目錄中的靜態資源

引用src\assets目錄中的靜態資源

選項式API和組合式API

選項式API

選項式API是一種通過包含多個選項的對象來描述組件邏輯的API，其常用的選項包括data、method、computed、watch等。

export default {// 數據選項data() {return {//定義數據}},// 計算屬性computed: {},// 方法methods: {},// 生命周期鉤子created() {},mounted() {},// 偵聽器watch: {}
}

組合式API

組合式API是將組件中的數據、方法、計算屬性、偵聽器等代碼全部組合在一起，寫在setup函數中。

<script>
import { computed, watch } from 'vue'export default {setup() {const 數據名 = 數據值 // 這里應該是定義一個響應式數據，原代碼不完整，假設為某個響應式數據const 方法名 = () => {} // 這里應該是定義一個方法const 計算屬性名 = computed(() => {}) // 定義計算屬性watch(偵聽器的來源, 回調函數, 可選參數) // 定義偵聽器，原代碼中參數未具體化return { 數據名, 方法名, 計算屬性名 }}
}
</script>

語法糖

用于簡化組合式API的代碼。

<script setup>
import { computed, watch } from 'vue'// 定義數據（這里假設使用 ref 或 reactive 來定義響應式數據，原代碼未具體化，以下以 ref 為例）
import { ref } from 'vue';
const 數據名 = ref(數據值); // 實際使用時需將“數據值”替換為具體的初始值// 定義方法
const 方法名 = () => {// 方法的具體邏輯
};// 定義計算屬性
const 計算屬性名 = computed(() => {// 計算屬性的具體邏輯，返回計算后的值
});// 定義偵聽器
watch(() => 偵聽器的來源, // 這里需要明確偵聽的具體響應式數據或計算屬性等(newValue, oldValue) => {// 回調函數，當偵聽的來源發生變化時執行// 可以使用 newValue 和 oldValue 進行相應操作},{// 可選參數，例如 deep、immediate 等}
);
</script>

選項式API和組合式API的關系

選項式API和組合式API是同一底層系統提供的兩套不同的接口。

選項式API是在組合式API的基礎上實現的。

如果使用選項式API，整個項目邏輯不易閱讀和理解，而且查找對應功能的代碼會存在一定難度。

如果使用組合式API，可以將項目的每個功能的數據、方法放到一起，這樣不管項目的大小，都可以快速定位到功能區域的相關代碼，便于閱讀和維護。同時，組合式API可以通過函數來實現高效的邏輯復用，這種形式更加自由，需要開發者有較強的代碼組織能力和拆分邏輯能力。

生命周期函數

在Vue中，組件的生命周期是指每個組件從被創建到被銷毀的整個過程，每個組件都有生命周期。如果想要在某個特定的時期進行特定的處理，可以通過生命周期函數來完成。隨著組件生命周期的變化，生命周期函數會自動執行。

組合式API的生命周期函數

函數	說明
onBeforeMount（）	組件掛載前
onMounted（）	組件掛載成功后
onBeforeUpdate（）	組件更新前
onUpdated（）	組件中的任意DOM元素更新后
onBeforeUnmount（）	組件實例被銷毀前
onUnmounted（）	組價實例被銷毀后

<script setup>
import { ref, onBeforeMount, reactive } from 'vue'
const loading=ref(true)
const items = reactive([])
onBeforeMount(async ()=>{try{const res = await fetch('/data/data.json')if(res.ok){const data = await res.json();data.forEach(item => {items.push(item)});}else{console.log('數據獲取錯誤',res.status)}}catch(err){console.log("數據獲取錯誤",err)}finally{loading.value=false}}
)
</script>

選項式API的生命周期函數

函數	說明
beforeCreate（）	實例對象創建前
created（）	實例對象創建后
beforeMount（）	頁面掛載前
mounted（）	頁面掛載成功后
beforeUpdate（）	組價更新前
updated（）	組件中任意的DOM元素更新后
beforeDestory（）	組件實例銷毀前
destroyed（）	組件實例銷毀后

組件的注冊和引用

當在Vue項目中定義了一個新的組件后，要想在其他組件中引用這個新的組件，需要對新的組件進行注冊。在注冊組件的時候，需要給組件取一個名字，從而區分每個組件，可以采用帕斯卡命名法為組件命名。

Vue提供了兩種注冊組件的方式，分別是全局注冊和局部注冊。

注冊組件

全局注冊

在實際開發中，如果某個組件的使用頻率很高，許多組件中都會引用該組件，則推薦將該組件全局注冊。被全局注冊的組件可以在當前Vue項目的任何一個組件內引用。

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';const app = createApp(App);
app.component('MyComponent', MyComponent);
app.mount('#app');

component（）支持鏈式調用，可以連續注冊多個組件。

局部注冊

在實際開發中，如果某些組織只在特定的情況下被用到，推薦進行局部注冊。局部注冊即在某個組件中注冊，被注冊的主鍵只能在當前注冊范圍內使用。

<script>
import ComponentA from './ComponentA.vue'
export default {components: { ComponentA }
}
</script>

在使用setup語法糖時，導入的組件會被自動注冊，無須手動注冊，導入后可以直接在模版中使用。

<script setup>
import ComponentA from './ComponentA.vue'
</script>

引用組件

將組件注冊完成后，若要將組件在頁面中渲染出倆，需要引用組件。

在組件的<template>標簽中可以引用其他組件，被引用的組件需要寫成標簽的形式，標簽名應與組件名對應。組件的標簽名可以使用短橫線分隔或帕斯卡命名法命名。

例如，<my-component>標簽和<MyComponent>標簽都表示引用MyComponent組件。一個組件可以被引用多次，但不可出現自我引用和互相引用的情況，否則會出現死循環。

解決組件之間的樣式沖突

在Vue中可以使用scoped屬性和深度選擇器來解決組件之間樣式的沖突。

scoped屬性

為<style>標簽添加scoped屬性后，Vue會自動為當前組件的DOM元素添加一個唯一的自定義屬性，并在樣式中為選擇器添加自定義屬性，從而限制樣式的作用范圍，防止組件之間的樣式沖突問題。

深度選擇器

如果在添加了scoped屬性后還需要讓某些樣式對子組件生效，則可以使用深度選擇器來實現。

深度選擇器通過:deep()偽類來實現，在其小括號中可以定義用于子組件的選擇器。

父組件向子組件傳遞數據

聲明props

在不使用setup語法糖的情況下，可以使用props選項聲明props。

props選項的形式可以是對象或字符串數組。

<script>
export default {props: {message: String,isVisible: Boolean}
}
</script>

如果不需要限制props的類型，可以聲明字符串數組形式的props。

<script>
export default {props: [message,isVisible]
}
</script>

使用setup語法糖時，可使用defineProps（）函數聲明props。

<script setup>
const props = defineProps({title: String,count: Number
})
</script>

<script setup>
const props = defineProps(['title', 'count'])
</script>

在組件中聲明了props后，可以直接在模版中輸出每個prop的值。

靜態綁定props

當在父組件中引用了子組件后，如果子組件中聲明了props，則可以在父組件中向子組件傳遞數據。如果傳遞的數據是固定不變的，則可以通過靜態綁定props的方式為子組件傳遞數據。

通過靜態綁定props的方式為子組件傳遞數據。

<子組件標簽名 自定義屬性A=“數據” 自定義屬性B=“數據” />

父組件向子組件的props傳遞了靜態的數據，屬性值默認為字符串類型。

動態綁定props

在父組件中使用v-bind可以為子組件動態綁定props，任意類型的值都可以傳給子組件的props，包括字符串、數字、布爾值、數組、對象等。

字符串類型數據

<template><Child :init="username" />
</template><script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const username = ref('小圓')
</script>

<template></template><script setup>
const props = defineProps(['init'])
console.log(props)
</script>

數字類型數據

<template><Child :init="12" /><Child :init="age" />
</template><script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const age = ref(12)
</script>

布爾值類型數據

<template><Child init /><Child :init="false" /><Child :init="isFlag" />
</template><script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const isFlag = ref(true)
</script>

數組類型數據

<template><Child :init="['唱歌', '跳舞', '滑冰']" /><Child :init="hobby" />
</template><script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const hobby = ref(['唱歌', '跳舞', '滑冰'])
</script>

對象類型數據

<template><Child :init="{ height: '180厘米', weight: '70千克' }" /><Child :height="bodyInfo.height" :weight="bodyInfo.weight" /><Child v-bind="bodyInfo" />
</template>
<script setup>
import Child from './Child.vue'
import { reactive } from 'vue'
const bodyInfo = reactive({height: '180厘米',weight: '70千克'
})
</script>

props 單項數據流

在Vue中，所有的props都遵循單向數據流原則，props數據因父組件的更新而變化，變化后的數據將向下流往子組件，而且不會逆向傳遞，這樣可以防止因子組件意外變更props導致數據流向難以理解的問題。

每次父組件綁定的props發生變更時，子組件中的props都將會刷新為最新的值。

驗證props

使用字符串數組形式的props的缺點是無法為每個prop指定具體的數據類型，而使用對象形式的props的優點是可以對每個prop進行數據類型的校驗。

對象形式的props可以使用多種驗證方案，包括基礎類型檢查、必填項的校驗、屬性默認值、自定義驗證函數等。在聲明props時，可以添加驗證方案。

基礎類型檢查

在開發中，有時需要對從父組件中傳遞過來的props數據進行基礎類型檢查，這時可以通過type屬性檢查合法的類型，如果從父組件中傳遞過來的值不符合此類型，則會報錯。

常見的類型有String（字符串）、Number（數字）、Boolean（布爾值）、Array（數組）、Object（對象）、Date（日期）、Function（函數）、Symbol（符號）以及任何自定義構造函數。

const props = {// 自定義屬性A，類型為字符串自定義屬性A: String, // 自定義屬性B，類型為數字自定義屬性B: Number, // 自定義屬性C，類型為布爾值自定義屬性C: Boolean, // 自定義屬性D，類型為數組自定義屬性D: Array, // 自定義屬性E，類型為對象自定義屬性E: Object, // 自定義屬性F，類型為日期自定義屬性F: Date, // 自定義屬性G，類型為函數自定義屬性G: Function, // 自定義屬性H，類型為符號自定義屬性H: Symbol 
};

必填項的校驗

父組件向子組件傳遞props數據時，有可能傳遞的數據為空，但是在子組件中要求該數據是必須傳遞的。此時，可以在聲明props時通過required屬性設置必填項，強調組件的使用者必須傳遞屬性的值。

props: {自定義屬性: { required: true },
}

屬性默認值

在聲明props時，可以通過default屬性定義屬性默認值，當父組件沒有向子組件的屬性傳遞數據時，屬性將會使用默認值

props: {自定義屬性: { default: 0 },
}

自定義驗證函數

如果需要對從父組件中傳入的數據進行驗證，可以通過?validator()?函數來實現。validator()?函數可以將?prop?的值作為唯一參數傳入自定義驗證函數，如果驗證失敗，則會在控制臺中發出警告。

props: {自定義屬性: {validator(value) {return ['success', 'warning', 'danger'].indexOf(value)!== -1;},},
}

子組件向父組件傳遞數據

在子組件中聲明自定義事件

若想使用自定義事件，首先需要在子組件中聲明自定義事件。

在不使用 setup 語法糖時，可以通過 emits 選項聲明自定義事件。

<script>
export default {emits: ['demo']
}
</script>

在使用 setup 語法糖時，需要通過調用 defineEmits() 函數聲明自定義事件。

<script setup>
const emit = defineEmits(['demo'])
</script>

在子組件中觸發自定義事件

在子組件中聲明自定義事件后，接著需要在子組件中觸發自定義事件。

當使用場景簡單時，可以使用內聯事件處理器，通過調用?$emit()?方法觸發自定義事件，將數據傳遞給使用的組件。

<button @click="$emit('demo', 1)">按鈕</button>

$emit()?方法的第 1 個參數為字符串類型的自定義事件的名稱，第 2 個參數為需要傳遞的數據，當觸發當前組件的事件時，該數據會傳遞給父組件。

除了使用內聯方式外，還可以直接定義方法來觸發自定義事件。

在不使用 setup 語法糖時，可以從?setup()?函數的第 2 個參數（即 setup 上下文對象）來訪問到?emit()?方法。

export default {setup(props, ctx) {const update = () => {ctx.emit('demo', 2)}return { update }}
}

如果使用setup語法糖，可以調用emit（）函數來實現。

<script setup>
const update = () => {emit('demo', 2)
}
</script>

在父組件中監聽自定義事件

在父組件中通過?v-on?可以監聽子組件中拋出的事件。

<子組件名 @demo="fun" />

當觸發?demo?事件時，會接收到從子組件中傳遞的參數，同時會執行?fun()?方法。父組件可以通過?value?屬性接收從子組件中傳遞來的參數。

const fun = value => {console.log(value)
}

跨級組件之間的數據傳遞

Vue提供了跨級組件之間數據傳遞的方式——依賴注入。一個父組件相對于其所有的后代組件而言，可作為依賴提供者。而任何后代的組件樹，無論層級多深，都可以注入由父組件提供的依賴。

對于父組件而言，如果要為后代組件提供數據，需要使用provide()函數。對于子組件而言，如果想要注入上層組件或整個應用提供的數據，需要使用inject()函數。

provide()

provide()函數可以提供一個值，用于被后代組件注入。

provide(注入名, 注入值)

provide()函數可以接收2個參數，第1個參數是注入名，后代組件會通過注入名查找所需的注入值；第2個參數是注入值，值可以是任意類型，包括響應式數據。

在不使用 setup 語法糖的情況下，provide()函數必須在組件的 setup()函數中調用。

<script>
import { ref, provide } from 'vue'
export default {setup() {const count = ref(1)provide( 'message', count )}
}
</script>

當使用 setup 語法糖時，使用 provide()函數。

<script setup>
import { provide } from 'vue'
provide('message', 'Hello Vue.js')
</script>

provide()函數除了可以在某個組件中提供依賴外，還可以全局提供依賴。

const app = createApp(App)
app.provide('message', 'Hello Vue.js')

inject（）函數

inject（）函數可以注入上層組件或者整個應用提供的數據。inject（）函數的語法格式。

inject（注入值，默認值，布爾值）

第1個參數是注入值，Vue會遍歷父組件，通過匹配注入的值來確定所提供的值，如果父組件鏈上多個組件為同一個數據提供了值，那么距離更近的組件將會覆蓋更遠的組件所提供的值。

第2個參數是可選的，用于在沒有匹配到注入的值時使用默認值。第2個參數可以是工廠函數，用于返回某些創建起來比較復雜的值。如果提供的默認值是函數，還需要將false作為第3個參數傳入，表明這個函數就是默認值，而不是工廠函數。

第3個參數是可選的，類型為布爾值，當參數值為false時，表示默認值是函數；當參數值為true時，表示默認值為工廠函數；當省略參數值時，表示默認值為其他類型的數據，不是函數或工廠函數。

動態組件

定義動態組件

利用動態組件可以動態切換頁面中顯示的組件。

<component is="要渲染的組價"></component>

標簽必須配合is屬性一起使用，is屬性的屬性值表示要渲染的組件，當該屬性值發生變化時，頁面中渲染的組件也會發生變化。

is屬性的屬性值可以是字符串或組件，當屬性值為組件時，如果要實現組件的切換，需要調用shallowRef()函數定義響應式數據，將組件保存為響應式數據。shallowRef()函數只處理對象最外層屬性的響應，它比ref()函數更適合于將組件保存為響應式數據。

利用KeepAlive組件實現組件緩存

組件緩存可以使組件創建一次后，不會被銷毀。在Vue中可以通過KeepAlive組件來實現組件緩存。

KeepAlive組件可通過標簽來定義，定義時使用標簽包裹需要被緩存的組件。

<KeepAlive>被緩存的組件
</KeepAlive>

組件緩存相關的生命周期函數

當組件被激活時，會觸發組件的onActivated()生命周期函數；當組件被緩存時，會觸發組件的onDeactivated()生命周期函數。

// onActivated()生命周期函數
onActivated(() => { })
// onDeactivated()生命周期函數
onDeactivated(() => { })

KeepAlive組件的常用屬性

在默認情況下，所有被標簽包裹的組件都會被緩存。如果想要實現特定組件被緩存或者特定組件不被緩存的效果，可以通過KeepAlive組件的常用屬性include、exclude屬性來實現。

屬性	類型	說明
include	字符串或正則表達式	只有名稱匹配的組件會被緩存
exclude	字符串或正則表達式	名稱匹配的組件不會被緩存
max	數字	最多可以緩存組件實例個數

在標簽中使用include屬性和exclude屬性時，多個組件名之間使用英文逗號分隔。

<KeepAlive include="組件名1, 組件名2">被緩存的組件
</KeepAlive>

注意：

在使用KeepAlive組件對名稱匹配的組件進行緩存時，它會根據組件的name選項進行匹配。如果沒有使用setup語法糖，必須手動聲明name選項；如果使用了setup語法糖，Vue會根據文件名自動生成name選項，無須手動聲明name選項。例如，在MyLeft.vue文件中使用setup語法糖時，自動生成的組件名為MyLeft。

插槽

Vue為組件的封裝者提供了插槽（slot），插槽是指開發者在封裝組件時不確定的、希望由組件的使用者指定的部分。也就是說，插槽是組件封裝期間為組件的使用者預留的占位符，允許組件的使用者在組件內展示特定的內容。通過插槽，可以使組件更靈活、更具有可復用性。

定義插槽

在封裝組件時，可以通過標簽定義插槽，從而在組件中預留占位符。假設項目中有一個MyButton組件。

<template><button><slot></slot></button>
</template>

在標簽內可以添加一些內容作為插槽的默認內容。如果組件的使用者沒有為插槽提供任何內容，則默認內容生效；如果組件的使用者為插槽提供了插槽內容，則該插槽內容會取代默認內容。

另外，如果一個組件沒有預留任何插槽，則組件的使用者提供的任何插槽內容都會不起作用。

使用插槽

使用插槽即在父組件中使用子組件的插槽，在使用時需要將子組件寫成雙標簽的形式，在雙標簽內提供插槽內容。

<template><MyButton>按鈕</MyButton>
</template>

因為插槽內容是在父組件模板中定義的，所以在插槽內容中可以訪問到父組件的數據。插槽內容可以是任意合法的模板內容，不局限于文本。

<MyButton><span style="color: yellow;">按鈕</span><MyLeft />
</MyButton>

具名插槽

在Vue中當需要定義多個插槽時，可以通過具名插槽來區分不同的插槽。具名插槽是給每一個插槽定義一個名稱，這樣就可以在對應名稱的插槽中提供對應的數據了。

插槽通過標簽來定義，標簽有一個name屬性，用于給各個插槽分配唯一的名稱，以確定每一處要渲染的內容。添加name屬性的標簽可用來定義具名插槽。

<slot name="插槽名稱"></slot>

在父組件中，如果要把內容填充到指定名稱的插槽中，可以通過一個包含v-slot指令的<template>來實現。

<組件名><template v-slot:插槽名稱></template>
</組件名>

與v-on和v-bind類似，v-slot也有簡寫形式，即吧v-slot替換為#。

作用域插槽

一般情況下，在父組件中不能使用子組件中定義的數據。如果想要在父組件中使用子組件中定義的數據，則需要通過作用域插槽來實現。

作用域插槽是帶有數據的插槽，子組件提供一部分數據給插槽，父組件接收子組件的數據進行頁面渲染。

定義數據

在封裝組件的過程中，可以為預留的插槽定義數據，供父組件接收并使用子組件中的數據。在作用域插槽中，可以將數據以類似傳遞props屬性的形式添加到標簽上。

<slot message="Hello Vue.js"></slot>

接收數據

使用默認插槽和具名插槽接收數據的方式不同，接下來分別進行講解。

在Vue中，每個插槽都有name屬性，表示插槽的名稱。在定義插槽時雖然省略了標簽的name屬性，但是name屬性默認為default，這樣的插槽屬于默認插槽。

在父組件中可以通過v-slot指令接收插槽中定義的數據，即接收作用域插槽對外提供的數據。通過v-slot指令接收到的數據可以在插槽內通過Mustache語法進行訪問。

<MyHeader v-slot="scope"><p>{{ scope.message }}</p>
</MyHeader>

通過v-slot接收從作用域插槽中傳遞的數據，scope為形參，表示從作用域插槽中接收的數據，該形參的名稱可以自定義。

作用域插槽對外提供的數據對象可以使用解構賦值以簡化數據的接收過程。

<MyHeader v-slot="{ message }"><p>{{ message }}</p>
</MyHeader>

通過解構賦值解構對象，解構后子組件中定義的數據可以直接訪問，而不是以“形參.屬性”的方式訪問。

自定義指令

Vue中的自定義指令分為兩類，分別是私有自定義指令和全局自定義指令。

私有自定義指令是指在組件內部定義的指令。私有自定義指令可以在定義該指令的組件內部使用。例如，在組件A中自定義了指令，只能在組件A中使用，組件B、組件C中不能使用。
全局自定義指令是指在全局定義的指令。全局自定義指令可以在全局使用，例如，在src\main.js文件中定義了全局自定義指令，這個指令可以用于任何一個組件。

一個自定義指令由一個包含自定義指令生命周期函數的參數來定義。

函數名	說明
created()	在綁定元素的屬性前調用
beforeMount()	在綁定元素被掛載前調用
mounted()	在綁定元素的父組件及自身的所有子節點都掛載完成后調用
beforeUpdate()	在綁定元素的父組件更新前調用
updated()	在綁定元素的父組件及自身的所有子節點都更新后調用
beforeUnmount()	在綁定元素的父組件卸載前調用
unmounted()	在綁定元素的父組件卸載后調用
el	指令所綁定的元素，可以直接用于操作DOM元素
binding	一個對象，包含很多屬性，用于接收屬性的參數值
vnode	代表綁定元素底層的虛擬節點
prevNode	之前頁面渲染中指令所綁定元素的虛擬節點

binding中包含以下6個常用屬性。

value：傳遞給指令的值。
arg：傳遞給指令的參數。
oldValue：之前的值，僅在beforeUpdate()函數和updated()函數中可用，無論值是否更改都可用。
modifiers：一個包含修飾符的對象 (如果有)。例如，在v-my-directive.foo.bar 中，修飾符對象是{ foo: true, bar: true }。
instance：使用該指令的組件實例。
dir：指令的定義對象。

如果沒有使用setup語法糖，可以在directives屬性中聲明私有自定義指令。

export default {directives: {color: {}}
}

在使用自定義指令時，需要以“v-”開頭。

<h1 v-color>標題</h1>

如果使用setup語法糖，任何以“v”開頭的駝峰式命名的變量都可以被用作一個自定義指令。

<template><span v-color></span>
</template><script setup>
const vColor = {}
</script>

全局自定義指令需要通過Vue應用實例的directive()方法進行聲明。

directive('自定義指令名稱', 對象)

directive()方法的第1個參數類型為字符串，表示全局自定義指令的名稱；第2個參數類型為對象或者函數，可以是對象或者函數形式，用于接收指令的參數值。

在使用自定義指令時，開發人員可以通過自定義指令的參數改變元素的狀態，傳遞的參數由自定義指令的生命周期函數的第2個參數接收。

在標簽中使用自定義指令時，通過等號（=）的方式可以為當前指令綁定參數.

<h1 v-color="color"></h1>

如果指令需要多個值，可以傳遞一個對象。

<div v-demo="{ color: 'red', text: 'hello' }"></div>

對于自定義指令來說，通常僅需要在mounted()函數和updated()函數中操作DOM元素，除此之外，不需要其他的生命周期函數。

將私有自定義指令簡寫為函數形式。

const vFontSize = (el, binding) => {el.style.fontSize = binding.value
}

將全局自定義指令簡寫成函數形式。

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

引用靜態資源

組件中，有時需要引用一些靜態資源，例如圖片資源、CSS代碼資源等。通過項目的public目錄和src\assets目錄都可以存放靜態資源，但引用靜態資源的方式不同。

引用public目錄中的靜態資源

public目錄用于存放不可編譯的靜態資源文件，該目錄下的文件會被復制到打包目錄，該目錄下的文件需要使用絕對路徑訪問。

<img src="/demo.png" >

引用src\assets目錄中的靜態資源

src\assets目錄用于存放可編譯的靜態資源文件，例如圖片、樣式文件等。該目錄下的文件需要使用相對路徑訪問。

在引用src\assets目錄中的圖片時，首先將圖片保存到本地，然后使用import語法將圖片導入需要的組件，最后通過img元素的src屬性添加圖片的路徑。