Vue2 模版指令元素綁定事件執行順序解析

Posted on by

Vue 自定義指令的執行機制

version: 2.6.14

前情提要

某日，業務需要我需要在按鈕點擊之前驗證某些條件，如果不符合即不執行click內的業務代碼。思前想後，寫一個指令不就可以瞭。做到既不改動原有的業務代碼，又可以移植。

<template>
  <button v-capture @click="handleClick">button</button>
</template>
<script>
  export default {
    methods: {
      handleClick(){
        console.log(1)
      }
    },
    directives: {
      capture: {
        bind(el) {
          el.captureHandler = (e) => {
            // 驗證條件
            console.log(2)
            e.stopPropagation()
          };
          el.addEventListener("click", el.captureHandler);
        },
        unbind(el) {
          el.removeEventListener("click", el.captureHandler);
        }
      }
    }
}
</script>

以上就是偽代碼，乍一看沒啥問題。

實際一運行，發現1和2都打印出來瞭，而且1還是在2之前運行的。

這樣一看模版上綁定的事件執行是在自定義指令綁定事件之前的。

翻開谷歌，也沒有找到相關案例。

DOM綁定

我們都知道vue的SFC最終還是會被編譯成js文件，最終模板會被編譯成vnode,

元素上綁定的事件會轉換成vnode上的一個對象

{
  // ....
  on: {
    click: 'handleClick'
  }
}

源碼

那就找一找這個對象在哪邊使用的

runtime中搜索addEventListener, 因為這個事件綁定上DOM中才有的事件，所以隻會在web中瞭

// src/platforms/web/runtime/modules/events.js
export default {
  create: updateDOMListeners,
  update: updateDOMListeners,
  destroy: (vnode: VNodeWithData) => updateDOMListeners(vnode, emptyNode)
}

具體實現就先不管

updateDOMListeners中通過調用瞭updateListeners方法，把事件綁定到元素上去

還有就是返回瞭一個對象，包括create、update、destroy, 這不是很像vue的生命周期函數命名嘛

根據文件依次向上找👆

最終在modules/index.js中導出瞭

export default [
  attrs,
  klass,
  events,
  domProps,
  style,
  transition
]

modules最終在哪裡使用的？

就是大名鼎鼎的patch.js

// src/core/vdom/patch.js

const { modules, nodeOps } = backend

for (i = 0; i < hooks.length; ++i) {
  cbs[hooks[i]] = []
  for (j = 0; j < modules.length; ++j) {
    if (isDef(modules[j][hooks[i]])) {
      cbs[hooks[i]].push(modules[j][hooks[i]])
    }
  }
}

函數一上來就把modules進行分類，把原來modules上的相關的對象進行合並，

最終cbs會變成一個對象

const cbs = {
  create: [fn1, fn2, fn3],
  update: [fn1, fn2, fn3],
  destroy: [fn1, fn2, fn3],
}

具體的執行的時機就不說瞭

directive

指令是vue的一大特色瞭，源於angularjs中就有指令這個東西瞭，vue3中依舊保留瞭下來

指令中對應以下幾個方法，也可以說是生命周期瞭

directives: {
  name: {
		bind(){},
    insert(){},
    inserted(){},
    componentUpdated(){},
    update(){},
    unbind(){},
  }
}

接下來找找指令是什麼時候初始化的

全局查找directives, 其實就這一個文件，那就是它瞭

// src/core/vdom/modules/directives.js
{
  create: updateDirectives,
  update: updateDirectives,
  destroy: function unbindDirectives (vnode: VNodeWithData) {
    updateDirectives(vnode, emptyNode)
  }
}

可以明顯看到它也是在create內部周期上調用瞭bind方法瞭

callHook(dir, 'bind', vnode, oldVnode)

為什麼先調用模版綁定的方法，再調用指令的方法

回到patch.js, 可以看到模塊在這裡進行瞭合並，把平臺相關的模塊放在前面，基礎指令和ref放在後面執行瞭。

同時官方也進行瞭註釋，先執行內置的方法再執行指令的方法。

// src/platforms/web/runtime/patch.js
import baseModules from 'core/vdom/modules/index'
import platformModules from 'web/runtime/modules/index'

// the directive module should be applied last, after all
// built-in modules have been applied.
const modules = platformModules.concat(baseModules)

還是註釋沒仔細看，這個文件打開過多少次瞭。😭

改瞭就可以瞭嗎

依舊不行。

問題就在addEventListener身上

拋開vue，看demo

const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
  console.log(1)
})
btn.addEventListener('click', () => {
  console.log(2)
})

總結

HTML 元素重復綁定同一個事件，後者並不會覆蓋前面的，隻會有綁定的先後順序

那之前的問題還能解麼

在捕獲階段執行事件, 如果不符合條件，則停止事件傳遞。

el.addEventListener("click", el.captureHandler, true);

並且stopImmediatePropagation還用不瞭

stopImmediatePropagation可以阻止元素上綁定的其他事件，但是也是按添加順序，阻止之後的事件執行

以上就是Vue2 模版指令元素綁定事件執行順序解析的詳細內容，更多關於Vue2 事件執行順序的資料請關註WalkonNet其它相關文章！

推薦閱讀：