在Vue 中可以把一系列復雜的操作包裝為一個指令。

什么是復雜的操作？

我的理解是：復雜邏輯功能的包裝、違背數據驅動的 DOM 操作以及對一些 Hack 手段的掩蓋等。我們總是期望以操作數據的形式來實現功能邏輯。

鉤子函數

對于自定義指令的定義，Vue2 有 5 個可選的鉤子函數。

bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。
inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于 document 中）。
update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。
componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。
unbind: 只調用一次，指令與元素解綁時調用。

接下來，定義一個簡單的指令以驗證這些鉤子函數的觸發時機。

template

<div id="app"> <my-comp v-if="msg" :msg="msg"></my-comp> <button @click="update">更新</button> <button @click="uninstall">卸載</button> <button @click="install">安裝</button></div>

script

Vue.directive('hello', { bind: function (el) {  console.log('bind') }, inserted: function (el) {  console.log('inserted') }, update: function (el) {  console.log('update') }, componentUpdated: function (el) {  console.log('componentUpdated') }, unbind: function (el) {  console.log('unbind') }})var myComp = { template: '<h1 v-hello>{{msg}}</h1>', props: {  msg: String }}new Vue({ el: '#app', data: {  msg: 'Hello' }, components: {  myComp: myComp }, methods: {  update: function () {   this.msg = 'Hi'  },  uninstall: function () {   this.msg = ''  },  install: function () {   this.msg = 'Hello'  } }})

頁面加載時

bind
inserted

組件更新時

點擊“更新”按鈕，更改數據觸發組件更新。

update
componentUpdated

卸載組件時

點擊“卸載”按鈕，數據置空否定判斷以觸發組件卸載。

unbind

重新安裝組件時

點擊“安裝”按鈕，數據賦值肯定判斷以觸發組件重新安裝。

bind
inserted

區別

從案例的運行中，對 5 個鉤子函數的觸發時機有了初步的認識。存疑的也就是bind和inserted、update和componentUpdated的區別了。

bind 和 inserted

據文檔所說，插入父節點時調用 inserted，來個測試。

bind: function (el) { console.log(el.parentNode) // null console.log('bind')},inserted: function (el) { console.log(el.parentNode) // <div id="app">...</div> console.log('inserted')}