指令周期钩子

自定义指令

创建阶段

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>