1、背景

最近在面試找工作，然后面試官就問了有關自定義指令的問題，然后由于平時自定義指令用的不多，只是看過官方文檔大概知道需要用到Vue.directive來自定義指令；面試結束之后，立刻就去網上找有關自定義指令的資料，發(fā)現自定義指令還是有很多學問的，于是就想寫個博客記錄下也是鞭策自己，要多嘗試，多學習?。?！

這是官方文檔有關自定義指令的模塊；自定義指令包括全局自定義指令以及局部自定義指令

2、局部自定義指令

果想注冊局部指令，組件中也接受一個 directives 的選項：

@Component({
  name: "CustomDirectives",
  components: {},
  directives: {
    //   局部自定義指令
    custom1: {
      inserted(el) {
        console.log("el", el);
        el.style.position = "absolute";
        el.style.top = " 50%";
        el.style.left = "50%";
        el.style.transform = "translate(-50%,-50%)";
        el.innerText = "加載中...";
        el.style.padding = "10px";
        el.style.color = "#333";
      },
    },
  },
})

3、全局自定義指令

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = "測試全局自定義指令";
      console.log("el", el);
      el.style.position = "absolute";
      el.style.top = " 50%";
      el.style.left = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});

4.1 自定義指令鉤子函數

• bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
• inserted：被綁定元素插入父節(jié)點時調用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時調用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
• unbind：只調用一次，指令與元素解綁時調用。

4.2 鉤子函數參數

• el：指令所綁定的元素，可以用來直接操作 DOM。
• binding：一個對象，

包含以下 property：

• 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"。
• modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。
  

4.3 動態(tài)指令傳參

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = "測試全局自定義指令";
      console.log("el", el);
      el.style.position = "absolute";
      el.style.top = " 50%";
      const arg = (binding as any).arg;
      el.style[arg] = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});


 <div v-custom2:[direction]="true"></div>
 
  private direction= 'left';

5、拓展

問完自定義指令之后，面試官又問了你平時都用到哪些默認的指令？
我回答：v-for v-if v-show v-model等等
然后問題就來了---v-for和v-if能同時使用嗎
我答：不能，同時使用會有性能問題。
問：為什么會有性能問題？
我答：如果每一次都需要遍歷整個數組，將會影響速度，尤其是當之需要渲染很小一部分的時候。
問：那如何避免v-for和v-if一起使用呢？
我：？？？ 工作中這種情況遇到的不多，一般都是把v-if放到遍歷的循環(huán)里面，（其實還是有性能問題）
面試結束之后，去查了下資料，網上說v-for和v-if不應該一起使用，必要情況下應該替換成computed屬性。

到此這篇關于Vue自定義指令詳細的文章就介紹到這了,更多相關Vue自定義指令內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論