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)用。在這里可以進行一次性的初始化設(shè)置。inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數(shù)參數(shù)見下)。componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
之前有個朋友問我 每個字都認識 連起來就不明白了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ù)和{{}}表達式都是不需要手動調(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表達式渲染頁面
修改頁面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)文章
使用Vue3+ElementPlus前端實現(xiàn)分片上傳的全過程
ElementPlus是一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于Vue?3.0的組件庫,提供了配套設(shè)計資源,幫助你的網(wǎng)站快速成型,下面這篇文章主要給大家介紹了關(guān)于使用Vue3+ElementPlus前端實現(xiàn)分片上傳的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于Vue3的vite中圖片動態(tài)加載3種方式的相關(guān)資料,圖片進入可視區(qū)域,進行動態(tài)加載圖片操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
在本篇文章里小編給大家分享的是關(guān)于vuex入門最詳細整理的相關(guān)內(nèi)容，需要的朋友們參考下。2020-03-03
最近在vue3項目中通過three.js實現(xiàn)了實際的三維效果demo,下面這篇文章主要給大家介紹了關(guān)于在vue中使用three.js的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
今天小編就為大家分享一篇vue2過濾器模糊查詢方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中分割線的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
下面小編就為大家分享一篇vue中axios解決跨域問題和攔截器的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
如何在Vue3中正確使用ElementPlus,親測有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測有效,避坑！具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解
這篇文章主要介紹了vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了vue父組件觸發(fā)事件改變子組件的值的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05