1、背景

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

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

2、局部自定義指令

果想注冊(cè)局部指令，組件中也接受一個(gè) directives 的選項(xiàng)：

@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 自定義指令鉤子函數(shù)

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

4.2 鉤子函數(shù)參數(shù)

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

包含以下 property：

• name：指令名，不包括 v- 前綴。
• value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
• oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
• expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
• arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
• modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar 中，修飾符對(duì)象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情。
• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
  

4.3 動(dòng)態(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、拓展

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

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

最新評(píng)論