VUE中的自定義指令鉤子函數怎么使用

這篇文章主要介紹“VUE中的自定義指令鉤子函數怎么使用”，在日常操作中，相信很多人在VUE中的自定義指令鉤子函數怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”VUE中的自定義指令鉤子函數怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

自定義指令鉤子函數

自定義指令

除了VUE 內置指令外，VUE也支持我們自定義注冊指令，分為局部和全局注冊 但這些想必大家都不陌生，其中官方API也是寫的明明白白 官方API點這里

而且自定義指令也會極大程度上幫助我們日常的編程，但這是很有意思的事情出現了，就是鉤子函數，很多老鐵都弄不明白這五個函數的具體區別

先上官方解釋

• bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

• inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

• update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

• unbind：只調用一次，指令與元素解綁時調用。

之前有個朋友問我 每個字都認識 連起來就不明白了QAQ 因此這里給大家結合栗子來演示下 這五個過程

webpack 框架

App.vue

<template>
  <div class="container">
      <div class="row">
          <div class="col-xs-12">
           <!-局部這側的組件->
              <app-test v-if="btn" :text="text"></app-test>
            <button @click="create">加載</button>
            <button @click="update">更新</button>
            <button @click="destory">關閉</button>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                btn:true,
                text:'hello',
            }
        },
        components: {
            appTest: {
            // v-test 就是自定義指令  具體在main.js中看
                template: '<h2 v-test>{{text}}</h2>',
                props: {
                    text: String
                }
            }
        },
        methods: {
            //創建的方法
            create(){
                this.btn=true
            },
            //更新組件內容
            update(){
                this.text='hi'
            },
            //利用內部指令摧毀組件
            destory(){
                this.btn=false
            }
        },
    }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
//全局注冊自定義指令  在每個鉤子函數輸出相應內容
//其中為了區分bind ,inserted 還相應輸出元素的父節點
//為了區本update,componentUpdated 還想贏輸出元素內容
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>

這時候我們可以判斷首先加載時會經歷這兩個鉤子函數，分別對應第一次綁定，和父元素加載完畢

按下更新按鈕

updata
hello
componentUpdated
hi

這時候我們可以判斷節點內容更新時會經歷這兩個鉤子函數，分別對應更新前，和更新后

按下關閉

unbind

階段銷毀時經歷unbind鉤子函數

按下加載

bind
 null
 inserted
 <div class="col-xs-12">…</div>

再次看下加載

小貼士

這時我們應該可以弄明白鉤子函數

但其實大多數情況 我們只希望節點在加載和更新時發生同樣的事情，而忽略其它鉤子函數,可以這么寫

Vue.directive('color-swatch', function (el, binding) {
    el.style.backgroundColor = binding.value
})

鉤子函數運行順序

在vue中，實例選項和鉤子函數和{{}}表達式都是不需要手動調用就可以直接執行的。 

在頁面首次加載執行順序有如下：

• beforeCreate //在實例初始化之后、創建之前執行

• created //實例創建后執行

• beforeMounted //在掛載開始之前調用

• filters //掛載前加載過濾器

• computed //計算屬性

• directives-bind //只調用一次，在指令第一次綁定到元素時調用

• directives-inserted //被綁定元素插入父節點時調用

• activated //keek-alive組件被激活時調用，則在keep-alive包裹的嵌套的子組件中觸發

• mounted //掛載完成后調用

• {{}} //mustache表達式渲染頁面

修改頁面input時，被自動調用的選項順序如下：

• watch //首先先監聽到了改變事件

• filters //過濾器沒有添加在該input元素上，但是也被調用了

• beforeUpdate //數據更新時調用，發生在虛擬dom打補丁前

• directived-update //指令所在的組件的vNode更新時調用，但可能發生在其子vNode更新前

• directives-componentUpdated//指令所在的組件的vNode及其子組件的vNode全部更新后調用

• updated //組件dom已經更新

組件銷毀時，執行順序如下：

• beforeDestroy //實例銷毀之前調用

• directives-unbind //指令與元素解綁時調用，只調用一次

• deactivated //keep-alive組件停用時調用

• destroyed //實例銷毀之后調用

到此，關于“VUE中的自定義指令鉤子函數怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！