您好,登錄后才能下訂單哦!
小編給大家分享一下Vue中鉤子函數(shù)怎么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
在Vue 中可以把一系列復(fù)雜的操作包裝為一個(gè)指令。
什么是復(fù)雜的操作?
我的理解是:復(fù)雜邏輯功能的包裝、違背數(shù)據(jù)驅(qū)動(dòng)的 DOM 操作以及對(duì)一些 Hack 手段的掩蓋等。我們總是期望以操作數(shù)據(jù)的形式來實(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)用。
接下來,定義一個(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: '<h2 v-hello>{{msg}}</h2>', 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' } } })
頁面加載時(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ù)文檔所說,插入父節(jié)點(diǎn)時(shí)調(diào)用 inserted,來個(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é)論
文檔說的沒錯(cuò)……
Demo
最佳實(shí)踐
根據(jù)需求的不同,我們要選擇恰當(dāng)?shù)臅r(shí)機(jī)去初始化指令、更新指令調(diào)用參數(shù)以及釋放指令存在時(shí)的內(nèi)存占用等。
比較常見的場(chǎng)景是:用指令包裝一些無依賴的第三方庫以擴(kuò)展組件功能。而一個(gè)健壯的庫通常會(huì)包含:初始化實(shí)例、參數(shù)更新和釋放實(shí)例資源占用等操作。
Vue.directive('hello', { bind: function (el, binding) { // 在 bind 鉤子中初始化庫實(shí)例 // 如果需要使用父節(jié)點(diǎn),也可以在 inserted 鉤子中執(zhí)行 el.__library__ = new Library(el, binding.value) }, update: function (el, binding) { // 模版更新意味著指令的參數(shù)可能被改變,這里可以對(duì)庫實(shí)例的參數(shù)作更新 // 酌情使用 update 或 componentUpdated 鉤子 el.__library__.setOptions(Object.assign(binding.oldValue, binding.value)) }, unbind: function (el) { // 釋放實(shí)例 el.__library__.destory() } })
以上是“Vue中鉤子函數(shù)怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。