VUE中的自定義指令鉤子函數(shù)講解
更新時間：2022年08月15日 14:16:13 作者：leon_smart
這篇文章主要介紹了VUE中的自定義指令鉤子函數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
自定義指令鉤子函數(shù)
自定義指令
除了VUE 內(nèi)置指令外，VUE也支持我們自定義注冊指令，分為局部和全局注冊 但這些想必大家都不陌生，其中官方API也是寫的明明白白 官方API點這里
而且自定義指令也會極大程度上幫助我們?nèi)粘５木幊?，但這是很有意思的事情出現(xiàn)了，就是鉤子函數(shù)，很多老鐵都弄不明白這五個函數(shù)的具體區(qū)別
先上官方解釋
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
之前有個朋友問我 每個字都認(rèn)識 連起來就不明白了QAQ 因此這里給大家結(jié)合栗子來演示下 這五個過程
webpack 框架
App.vue
<template> ? <div class="container"> ? ?? ?<div class="row"> ? ?? ??? ?<div class="col-xs-12"> ? ?? ??? ? <!-局部這側(cè)的組件-> ? ?? ??? ??? ?<app-test v-if="btn" :text="text"></app-test> ?? ??? ??? ?<button @click="create">加載</button> ?? ??? ??? ?<button @click="update">更新</button> ?? ??? ??? ?<button @click="destory">關(guān)閉</button> ? ?? ??? ?</div> ? ?? ?</div> ? </div> </template>
<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?btn:true,
?? ??? ??? ??? ?text:'hello',
?? ??? ??? ?}
?? ??? ?},
?? ??? ?components: {
?? ??? ??? ?appTest: {
?? ??? ??? ?// v-test 就是自定義指令 ?具體在main.js中看
?? ??? ??? ??? ?template: '<h1 v-test>{{text}}</h1>',
?? ??? ??? ??? ?props: {
?? ??? ??? ??? ??? ?text: String
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?//創(chuàng)建的方法
?? ??? ??? ?create(){
?? ??? ??? ??? ?this.btn=true
?? ??? ??? ?},
?? ??? ??? ?//更新組件內(nèi)容
?? ??? ??? ?update(){
?? ??? ??? ??? ?this.text='hi'
?? ??? ??? ?},
?? ??? ??? ?//利用內(nèi)部指令摧毀組件
?? ??? ??? ?destory(){
?? ??? ??? ??? ?this.btn=false
?? ??? ??? ?}
?? ??? ?},
?? ?}
</script>main.js
import Vue from 'vue'
import App from './App.vue'
//全局注冊自定義指令 ?在每個鉤子函數(shù)輸出相應(yīng)內(nèi)容
//其中為了區(qū)分bind ,inserted 還相應(yīng)輸出元素的父節(jié)點
//為了區(qū)本update,componentUpdated 還想贏輸出元素內(nèi)容
Vue.directive('test', {
? bind: function (el) {
? ? console.log('bind');
? ? console.log(el.parentNode)
? },
? inserted: function (el) {
? ? console.log('inserted');
? ? console.log(el.parentNode)
? },
? update: function (el) {
? ? console.log('update')；
? ? console.log(el.innerHTML)
? },
? componentUpdated: function (el) {
? ? console.log('componentUpdated')
? ? console.log(el.innerHTML)
? },
? unbind: function (el) {
? ? console.log('unbind')
? }
})
new Vue({
? el: '#app',
? render: h => h(App)
})OK 運行 首先我們看到控制臺輸出
加載
bind ?null ?inserted ?<div class=?"col-xs-12">?…?</div>?
這時候我們可以判斷首先加載時會經(jīng)歷這兩個鉤子函數(shù)，分別對應(yīng)第一次綁定，和父元素加載完畢
按下更新按鈕
updata hello componentUpdated hi
這時候我們可以判斷節(jié)點內(nèi)容更新時會經(jīng)歷這兩個鉤子函數(shù)，分別對應(yīng)更新前，和更新后
按下關(guān)閉
unbind
階段銷毀時經(jīng)歷unbind鉤子函數(shù)
按下加載
bind ?null ?inserted ?<div class=?"col-xs-12">?…?</div>?
再次看下加載
小貼士
這時我們應(yīng)該可以弄明白鉤子函數(shù)
但其實大多數(shù)情況 我們只希望節(jié)點在加載和更新時發(fā)生同樣的事情，而忽略其它鉤子函數(shù),可以這么寫
Vue.directive('color-swatch', function (el, binding) {
?? ?el.style.backgroundColor = binding.value
})鉤子函數(shù)運行順序
在vue中，實例選項和鉤子函數(shù)和{{}}表達(dá)式都是不需要手動調(diào)用就可以直接執(zhí)行的。
在頁面首次加載執(zhí)行順序有如下：
beforeCreate//在實例初始化之后、創(chuàng)建之前執(zhí)行created//實例創(chuàng)建后執(zhí)行beforeMounted//在掛載開始之前調(diào)用filters//掛載前加載過濾器computed//計算屬性directives-bind//只調(diào)用一次，在指令第一次綁定到元素時調(diào)用directives-inserted//被綁定元素插入父節(jié)點時調(diào)用activated//keek-alive組件被激活時調(diào)用，則在keep-alive包裹的嵌套的子組件中觸發(fā)mounted//掛載完成后調(diào)用{{}}//mustache表達(dá)式渲染頁面
修改頁面input時，被自動調(diào)用的選項順序如下：
watch//首先先監(jiān)聽到了改變事件filters//過濾器沒有添加在該input元素上，但是也被調(diào)用了beforeUpdate//數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬dom打補丁前directived-update//指令所在的組件的vNode更新時調(diào)用，但可能發(fā)生在其子vNode更新前directives-componentUpdated//指令所在的組件的vNode及其子組件的vNode全部更新后調(diào)用updated//組件dom已經(jīng)更新
組件銷毀時，執(zhí)行順序如下：
beforeDestroy//實例銷毀之前調(diào)用directives-unbind//指令與元素解綁時調(diào)用，只調(diào)用一次deactivated//keep-alive組件停用時調(diào)用destroyed//實例銷毀之后調(diào)用
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+axios+java實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項2022-10-10
vant steps流程圖的圖標(biāo)使用slot自定義方式
這篇文章主要介紹了vant steps流程圖的圖標(biāo)使用slot自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue-cli構(gòu)建項目使用 less，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
基于vue cli 通過命令行傳參實現(xiàn)多環(huán)境配置
這篇文章主要介紹了vue項目通過命令行傳參實現(xiàn)多環(huán)境配置(基于@vue/cli)的相關(guān)資料,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue生成動態(tài)表單功能，這是小編第一次接這個需求，作為前端開發(fā)的我真的不知如何下手，今天小編通過一段代碼給大家分享vue生成動態(tài)表單效果,需要的朋友可以參考下2019-11-11
ElementPlus?Table表格實現(xiàn)可編輯單元格
本文主要介紹了ElementPlus?Table表格實現(xiàn)可編輯單元格,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性
本篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之Vue中的computed屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10