VUE中的自定義指令鉤子函數講解

Posted on by

自定義指令鉤子函數

自定義指令

除瞭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: '<h1 v-test>{{text}}</h1>',
                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 //實例銷毀之後調用

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：