指令周期钩子
创建阶段
beforeCreate-->data-->created-->beforeMount-->render-->bind-->mounted-->inserted
更新阶段
update-->componentUpdated-->beforeUpdate-->render-->updated
销毁阶段
beforeDestroy-->destroyed-->unbind
以下为自定义指令示例：
<template>
<div>
<button @click="show = !show"> 销毁 </button>
<button v-if="show" v-append-text="`hello ${number}`" @click="number++"> 按钮 </button>
</div>
</template>
<script>
export default {
directives: {
appendText: {
bind() {
console.log("bind");
},
inserted(el, binding) {
el.appendChild(document.createTextNode(binding.value));
console.log("inserted", el, binding);
},
update() {
console.log("update");
},
componentUpdated(el, binding) {
el.removeChild(el.childNodes[el.childNodes.length - 1]);
el.appendChild(document.createTextNode(binding.value));
console.log("componentUpdated"); },
unbind() { console.log("unbind"); }
}
},
data() {
return {
number: 1, show: true
};
}
};
</script>
