在Vue 中可以把一系列復(fù)雜的操作包裝為一個(gè)指令。

什么是復(fù)雜的操作？

我的理解是：復(fù)雜邏輯功能的包裝、違背數(shù)據(jù)驅(qū)動(dòng)的 DOM 操作以及對(duì)一些 Hack 手段的掩蓋等。我們總是期望以操作數(shù)據(jù)的形式來(lái)實(shí)現(xiàn)功能邏輯。

鉤子函數(shù)

對(duì)于自定義指令的定義，Vue2 有 5 個(gè)可選的鉤子函數(shù)。

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

接下來(lái)，定義一個(gè)簡(jiǎn)單的指令以驗(yàn)證這些鉤子函數(shù)的觸發(fā)時(shí)機(jī)。

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'
  }
 }
})

頁(yè)面加載時(shí)

bind
inserted

組件更新時(shí)

點(diǎn)擊“更新”按鈕，更改數(shù)據(jù)觸發(fā)組件更新。

update
componentUpdated

卸載組件時(shí)

點(diǎn)擊“卸載”按鈕，數(shù)據(jù)置空否定判斷以觸發(fā)組件卸載。

unbind

重新安裝組件時(shí)

點(diǎn)擊“安裝”按鈕，數(shù)據(jù)賦值肯定判斷以觸發(fā)組件重新安裝。

bind
inserted

區(qū)別

從案例的運(yùn)行中，對(duì) 5 個(gè)鉤子函數(shù)的觸發(fā)時(shí)機(jī)有了初步的認(rèn)識(shí)。存疑的也就是bind和inserted、update和componentUpdated的區(qū)別了。

bind 和 inserted

據(jù)文檔所說(shuō)，插入父節(jié)點(diǎn)時(shí)調(diào)用 inserted，來(lái)個(gè)測(cè)試。

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')
}

分別在兩個(gè)鉤子函數(shù)中輸出父節(jié)點(diǎn)：bind 時(shí)父節(jié)點(diǎn)為 null，inserted 時(shí)父節(jié)點(diǎn)存在。

update 和 componentUpdated

關(guān)于這兩個(gè)的介紹，從字眼上看感覺是組件更新周期有關(guān)，繼續(xù)驗(yàn)證。

update: function (el) {
 console.log(el.innerHTML) // Hello
 console.log('update')
},
componentUpdated: function (el) {
 console.log(el.innerHTML) // Hi
 console.log('componentUpdated')
}

沒毛病，update 和 componentUpdated 就是組件更新前和更新后的區(qū)別。

結(jié)論

文檔說(shuō)的沒錯(cuò)……
Demo

最佳實(shí)踐

根據(jù)需求的不同，我們要選擇恰當(dāng)?shù)臅r(shí)機(jī)去初始化指令、更新指令調(diào)用參數(shù)以及釋放指令存在時(shí)的內(nèi)存占用等。

比較常見的場(chǎng)景是：用指令包裝一些無(wú)依賴的第三方庫(kù)以擴(kuò)展組件功能。而一個(gè)健壯的庫(kù)通常會(huì)包含：初始化實(shí)例、參數(shù)更新和釋放實(shí)例資源占用等操作。

Vue.directive('hello', {
 bind: function (el, binding) {
  // 在 bind 鉤子中初始化庫(kù)實(shí)例
  // 如果需要使用父節(jié)點(diǎn)，也可以在 inserted 鉤子中執(zhí)行
  el.__library__ = new Library(el, binding.value)
 },
 update: function (el, binding) {
  // 模版更新意味著指令的參數(shù)可能被改變，這里可以對(duì)庫(kù)實(shí)例的參數(shù)作更新
  // 酌情使用 update 或 componentUpdated 鉤子
  el.__library__.setOptions(Object.assign(binding.oldValue, binding.value))
 },
 unbind: function (el) {
  // 釋放實(shí)例
  el.__library__.destory()
 }
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論