99热精品久久只有精品30,精品自在线,国产网站在线播放

Vue3 高階 API 大匯總，強到離譜

高階函數是什么呢?

高階函數英文名叫：Higher Order function ，一個函數可以接收一個或多個函數作為輸入，或者輸出一個函數，至少滿足上述條件之一的函數，叫做高階函數。

前言

本篇內容的知識點比較多，講得不夠細致，不熟悉的可翻閱前幾篇文章，分別對每個知識點都有一篇特別詳細的文章。建議讀者收藏!

一、Mixin 混入

mixin 混入，提供了一種非常靈活的方式，來分發 vue 組件中的可復用功能，一個mixin 對象可以包含任意組件選項，當組件使用 mixin 對象時，所有的 mixin 對象的選項將被混入組件本身的選項。

mixins 是一個數組，一個組件可以引入多個 mixin 對象。使用方法如：

<script>
const myMixin = {
data(){
return {
num:520
}
},
mounted(){
console.log('mixin mounted');
}
}
export default {
mixins:[myMixin],
}
</script>

mixin 使用主要針對選項式API，在vue3中使用相對少。使用時注意事項：

使用 mixin 對象時，組件內部和 mixin 包含相同選項，該選項會進行合并處理，并不會覆蓋。
使用的 mixin 對象選項和實例中的選項擁有相同的屬性時，會選擇就近原則，優先繼承實例內的值，所以 mixin 對象的屬性會被實例中的屬性給覆蓋掉。
mixin 對象也可以添加生命周期鉤子函數，兩者都會執行，優先執行 mixin 中的，然后再執行實例中的。

mixin也可以自定義屬性，如果與實例中的屬性沖突時，可以使用 optionMergeStrategies 選項合并策略，自定義合并規則。

二、自定義指令

自定義指令分為全局和局部自定義指令。

2.1、自定義指令定義

全局自定義指令

在 vue3 中，vue 實例通過createApp 創建，所以全局自定義指令的掛載方式也改變了， directive 被掛載到 app上。

app.directive('focus',{
mounted(el){
el.focus()
}
})

局部自定義指令

const autoFocus = {
focus:{
mounted(el){
el.focus()
}
}
}
export default{
directives:autoFocus,
}

自定義指令 v-xxx 直接使用就好，對應上述示例自定義指令為 v-focus。

2.2、自定義指令鉤子函數參數

每個鉤子里面的參數含義:

mounted(el,binding,vnode){…}

el:代表當前使用該指令的元素

binding：指令傳來的值

vnode：當前元素節點相關

2.3、自定義指令鉤子函數

一個指令定義對象可以提供如下幾個鉤子函數(都是可選的，根據需要引入)

created ：綁定元素屬性或事件監聽器被應用之前調用。該指令需要附加需要在普通的 v-on 事件監聽器前調用的事件監聽器時，這很有用。
beforeMounted ：當指令第一次綁定到元素并且在掛載父組件之前執行。
mounted ：綁定元素的父組件被掛載之后調用。
beforeUpdate ：在更新包含組件的 VNode 之前調用。
updated ：在包含組件的 VNode 及其子組件的 VNode 更新后調用。
beforeUnmounted ：在卸載綁定元素的父組件之前調用
unmounted ：當指令與元素解除綁定且父組件已卸載時，只調用一次。

2.4、自定義指令參數

自定義指令的也可以帶參數，參數可以是動態的，參數可以根據組件實例數據進行實時更新。

使用方法如下：

<template>
<div>
<div v-fixed:pos="posData">定位</div>
</div>
</template>
<script>
//自定義指令動態參數
const autoFocus = {
fixed:{
beforeMount(el,binding){
el.style.position = "fixed"
el.style.left = binding.value.left+'px'
el.style.top = binding.value.top + 'px'
}
}
}
export default {
directives:autoFocus,
setup(){
const posData = {
left:20,
top:200
}
return {
posData,
}
}
}
</script>

三、teleport 傳送門

teleport 傳送門組件，提供一種簡潔的方式，可以指定它里面的內容的父元素。通俗易懂地講，就是 teleport 中的內容允許我們控制在任意的 DOM 中，使用簡單。

使用語法：

<teleport to="body">
<div>
需要創建的內容
</div>
</teleport>

to 屬性是指定 teleport 中的內容加入的 DOM 元素。可以是標簽名，也可以是 id 或類名。

為什么使用 teleport ?

使用 vue 開發時，都是在多個組件之間不斷地嵌套，處理元素的樣式或者層級的時候就會變得困難。如我們需要添加一個 modal 模態框或 toast 提示框，如果我們把這樣的框可以從 vue 組件中剝離出來，我們樣式和層級設置起來會更加簡便。

有些同學會想，這直接放到 index.html 中不就好了嗎?另外 modal 、toast 元素需要使用 vue 組件的狀態值，通過狀態控制 modal、toast 的隱藏顯示。如果直接放入 index.html 則狀態控制就復雜了。

所以 teleport 傳送門組件就派上用場了。有點像“哆啦A夢”的任意門，可以把元素傳送到任意的元素內。同時還可以使用 vue 組件內的狀態值控制它。

四、setup

setup 用來寫組合式 api，從生命周期鉤子函數角度分析，相當于取代了 beforeCreate 。會在 creted 之前執行。內部的屬性和方法，必須 return 暴露出來，將屬性掛載到實例上，否則沒有辦法使用。setup內部沒有 this ，所以不能掛載 this 相關的東西，它可以接收兩個參數：props 和 context 。

setup 特性：

1、這個函數會在 created 之前執行，上述已解釋。

2、setup 內部沒有 this，不能掛載 this 相關的東西。

3、setup 內部的屬性和方法，必須 return 暴露出來，否則沒有辦法使用。

4、setup 內部數據不是響應式的。

5、setup不能調用生命周期相關函數，但生命周期函數可以調用setup內的函數。