vue自定義指令，結合案列詳解各個鉤子函數觸發的順序和場景

概述

之前的業務場景比較簡單，只是會用自定義指令，一般都用inserted鉤子函數也沒有出現什麼bug所有一直也沒有全面的去學習，這次在下圖的業務場景中，從編輯進來的時候，2位小數的自定義指令失效了，但是點擊新增的新行又是有效的，然後我打印了el和binding.value發現el和binding.value是沒有對應上的，於是我就想到肯定是沒有在dom完全渲染完後，就執行了自定義指令的綁定，於是造成了這個bug，於是就查閱了vue的自定義指令部分的文檔,發現vue除了inserted還有bind,update,componentUpdated,unbind，下面我寫個demo逐一來講解。

下面寫了一個demo

寫了一個demo來展示不同的鉤子函數觸發的先後順序和次數，什麼時候觸發。

<template>
	<div>
		首頁
		<input v-for="item in list" :key="item" v-test="item" type="text">
	</div>
</template>

<script>
	export default {
		name:'demo',
		data() {
			return {
				list:[1,2]
			}
		},
		mounted(){
			setTimeout(()=>{
				console.log('-----------------------------------splice的分割線------------------------------------------')
				this.list.splice(1,1)
			},2000)
			setTimeout(()=>{
				console.log('----------------------------------------push的分割線---------------------------------------------')
				this.list.push(2)
			},3000)
		},
		directives:{
			test:{
				// 只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。
				bind(el,bingding,vnode,oldVnode){
					console.log('bing',el,bingding,vnode,oldVnode)
				},
				// inserted 被綁定元素插入父節點時調用（僅保證父節點存在，但不一定已被插入文檔中）
				inserted(el,bingding,vnode,oldVnode){
					console.log('inserted',el,bingding,vnode,oldVnode)
				},
				// update 所在組件的VNode更新時調用，但是可能發生在其子VNode更新之前。指令的值可能發生了改變，也可能沒有。
				update(el,bingding,vnode,oldVnode){
					console.log('update',el,bingding,vnode,oldVnode)
				},
				// 指令所在組件的VNode及其子VNode全部更新後調用
				componentUpdated(el,bingding,vnode,oldVnode){
					console.log('componentUpdated',el,bingding,vnode,oldVnode)
				},
				// 只調用一次，指令與元素解綁時調用
				unbind(el,bingding,vnode,oldVnode){
					console.log('unbind',el,bingding,vnode,oldVnode)
				}
			}
		}
	}
</script>

總結

• 1、初始化先執行bing鉤子函數， 被綁定元素插入父節點時調用inserted鉤子函數
• 2、節點移除後會執行update和componentUpdate鉤子函數，然後執行解綁的鉤子函數unbind
• 3、有節點插入會先執行節點的更新和節點更新完畢的鉤子函數，然後執行綁定和inserted 鉤子函數