vue自定義指令update 和 componentUpdated及bind 和 inserted區別

1. 適用

須要對普通 DOM 元素進行底層操做，這時候就會用到自定義指令

2. 鉤子函數參數

除了 el 以外，其它參數都應該是隻讀的，切勿進行修改

<div v-if="show" v-my-directive:arguments.modification="1+1" class="focus">

• name：指令名，不包括 v- 前綴。
• value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
• oldValue：指令綁定的前一個值，僅在 update 和 + componentUpdated 鉤子中可用。不管值是否改變均可用。
• expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。 ==注意 字符串的表達式==
• arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。 ==注意 字符串的foo是固定值，不是變量==
• modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。 ==注意 表示有foo、bar修飾符值爲true==

3. 動態指令參數

v-mydirective:[argument]="value"

argument能夠是動態變化的，而且在鉤子裏面實時更新的

4.鉤子區別

update 和 componentUpdated

• 共同點：組件更新都會調用，update在componentUpdated以前

• 不一樣點：

  • update 組件更新前的狀態
  • componentUpdated 組件更新後的狀態

場景：點擊事件，div的內容追加 ！；

update(el, binding,vnode,oldVnode){
        console.log(el.innerHTML);       // <div>！</div>
    }
    
    componentUpdated(el, binding,vnode,oldVnode){
        console.log(el.innerHTML);       // //<div>！！</div>
    }
    
    // 注意： 區別是div裏面的！數量

bind 和 inserted

• 共同點： dom插入都會調用，bind在inserted以前

• 不一樣點：

  • bind 時父節點爲 null
  • inserted 時父節點存在。
  • bind是在dom樹繪製前調用，inserted在dom樹繪製後調用

bind: function (el) {
        console.log(el.parentNode)  // null
        console.log('bind')
    },
    inserted: function (el) {
        console.log(el.parentNode)  // <div class="directive-box">...</div>
        console.log('inserted')
    }

注意：

1.自定義指令的鉤子裏面沒有vue實例，this指向undefined；