自定義指令鉤子函數(shù)

自定義指令

除了VUE 內(nèi)置指令外，VUE也支持我們自定義注冊(cè)指令，分為局部和全局注冊(cè) 但這些想必大家都不陌生，其中官方API也是寫(xiě)的明明白白 官方API點(diǎn)這里

而且自定義指令也會(huì)極大程度上幫助我們?nèi)粘５木幊?，但這是很有意思的事情出現(xiàn)了，就是鉤子函數(shù)，很多老鐵都弄不明白這五個(gè)函數(shù)的具體區(qū)別

先上官方解釋

• 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ā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

之前有個(gè)朋友問(wèn)我 每個(gè)字都認(rèn)識(shí) 連起來(lái)就不明白了QAQ 因此這里給大家結(jié)合栗子來(lái)演示下 這五個(gè)過(guò)程

webpack 框架

App.vue

<template>
? <div class="container">
? ?? ?<div class="row">
? ?? ??? ?<div class="col-xs-12">
? ?? ??? ? <!-局部這側(cè)的組件->
? ?? ??? ??? ?<app-test v-if="btn" :text="text"></app-test>
?? ??? ??? ?<button @click="create">加載</button>
?? ??? ??? ?<button @click="update">更新</button>
?? ??? ??? ?<button @click="destory">關(guān)閉</button>
? ?? ??? ?</div>
? ?? ?</div>
? </div>
</template>

<script>
?? ?export default {
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?btn:true,
?? ??? ??? ??? ?text:'hello',
?? ??? ??? ?}
?? ??? ?},
?? ??? ?components: {
?? ??? ??? ?appTest: {
?? ??? ??? ?// v-test 就是自定義指令 ?具體在main.js中看
?? ??? ??? ??? ?template: '<h1 v-test>{{text}}</h1>',
?? ??? ??? ??? ?props: {
?? ??? ??? ??? ??? ?text: String
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?//創(chuàng)建的方法
?? ??? ??? ?create(){
?? ??? ??? ??? ?this.btn=true
?? ??? ??? ?},
?? ??? ??? ?//更新組件內(nèi)容
?? ??? ??? ?update(){
?? ??? ??? ??? ?this.text='hi'
?? ??? ??? ?},
?? ??? ??? ?//利用內(nèi)部指令摧毀組件
?? ??? ??? ?destory(){
?? ??? ??? ??? ?this.btn=false
?? ??? ??? ?}
?? ??? ?},
?? ?}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
//全局注冊(cè)自定義指令 ?在每個(gè)鉤子函數(shù)輸出相應(yīng)內(nèi)容
//其中為了區(qū)分bind ,inserted 還相應(yīng)輸出元素的父節(jié)點(diǎn)
//為了區(qū)本update,componentUpdated 還想贏輸出元素內(nèi)容
Vue.directive('test', {
? bind: function (el) {
? ? console.log('bind');
? ? console.log(el.parentNode)
? },
? inserted: function (el) {
? ? console.log('inserted');
? ? console.log(el.parentNode)
? },
? update: function (el) {
? ? console.log('update')；
? ? console.log(el.innerHTML)
? },
? componentUpdated: function (el) {
? ? console.log('componentUpdated')
? ? console.log(el.innerHTML)
? },
? unbind: function (el) {
? ? console.log('unbind')
? }
})
new Vue({
? el: '#app',
? render: h => h(App)
})

OK 運(yùn)行 首先我們看到控制臺(tái)輸出

加載

bind
?null
?inserted
?<div class=?"col-xs-12">?…?</div>?

這時(shí)候我們可以判斷首先加載時(shí)會(huì)經(jīng)歷這兩個(gè)鉤子函數(shù)，分別對(duì)應(yīng)第一次綁定，和父元素加載完畢

按下更新按鈕

updata
hello
componentUpdated
hi

這時(shí)候我們可以判斷節(jié)點(diǎn)內(nèi)容更新時(shí)會(huì)經(jīng)歷這兩個(gè)鉤子函數(shù)，分別對(duì)應(yīng)更新前，和更新后

按下關(guān)閉

unbind

階段銷毀時(shí)經(jīng)歷unbind鉤子函數(shù)

按下加載

bind
?null
?inserted
?<div class=?"col-xs-12">?…?</div>?

再次看下加載

小貼士

這時(shí)我們應(yīng)該可以弄明白鉤子函數(shù)

但其實(shí)大多數(shù)情況 我們只希望節(jié)點(diǎn)在加載和更新時(shí)發(fā)生同樣的事情，而忽略其它鉤子函數(shù),可以這么寫(xiě)

Vue.directive('color-swatch', function (el, binding) {
?? ?el.style.backgroundColor = binding.value
})

鉤子函數(shù)運(yùn)行順序

在vue中，實(shí)例選項(xiàng)和鉤子函數(shù)和{{}}表達(dá)式都是不需要手動(dòng)調(diào)用就可以直接執(zhí)行的。 

在頁(yè)面首次加載執(zhí)行順序有如下：

• beforeCreate //在實(shí)例初始化之后、創(chuàng)建之前執(zhí)行
• created //實(shí)例創(chuàng)建后執(zhí)行
• beforeMounted //在掛載開(kāi)始之前調(diào)用
• filters //掛載前加載過(guò)濾器
• computed //計(jì)算屬性
• directives-bind //只調(diào)用一次，在指令第一次綁定到元素時(shí)調(diào)用
• directives-inserted //被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用
• activated //keek-alive組件被激活時(shí)調(diào)用，則在keep-alive包裹的嵌套的子組件中觸發(fā)
• mounted //掛載完成后調(diào)用
• {{}} //mustache表達(dá)式渲染頁(yè)面

修改頁(yè)面input時(shí)，被自動(dòng)調(diào)用的選項(xiàng)順序如下：

• watch //首先先監(jiān)聽(tīng)到了改變事件
• filters //過(guò)濾器沒(méi)有添加在該input元素上，但是也被調(diào)用了
• beforeUpdate //數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬dom打補(bǔ)丁前
• directived-update //指令所在的組件的vNode更新時(shí)調(diào)用，但可能發(fā)生在其子vNode更新前
• directives-componentUpdated//指令所在的組件的vNode及其子組件的vNode全部更新后調(diào)用
• updated //組件dom已經(jīng)更新

組件銷毀時(shí)，執(zhí)行順序如下：

• beforeDestroy //實(shí)例銷毀之前調(diào)用
• directives-unbind //指令與元素解綁時(shí)調(diào)用，只調(diào)用一次
• deactivated //keep-alive組件停用時(shí)調(diào)用
• destroyed //實(shí)例銷毀之后調(diào)用

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論