<template>

  <div>

    <div v-if="isMounted" ref="direc" v-my-directive:foo.bar="value">

      {{ value }}

    </div>

    <input v-model="value" />

    <button @click="mount">Mount</button>

    <button @click="unmount">Unmount</button>

    <p v-for="l of logs" :key="l">{{ l }}</p>

  </div>

</template>

​

<script>

export default {

  data() {

    return {

      value: "",

      isMounted: true,

      logs: []

    };

  },

  methods: {

    mount() {

      this.isMounted = true;

    },

    unmount() {

      this.isMounted = false;

    }

  },

  directives: {

    myDirective: {

      created(el, binding, vnode, prevVnode) {

        binding.instance.logs.push("created");

      },

      beforeMount(el, binding, vnode, prevVnode) {

        binding.instance.logs.push("beforeMount");

      },

      mounted(el, binding, vnode, prevVnode) {

        binding.instance.logs.push("mounted");

      },

      // codepen 내부 동작 때문에 여러 번 실행됩니다. 원래 값이 변할 때만 나타나요

      // beforeUpdate(el, binding, vnode, prevVnode) {

      //   binding.instance.logs.push("beforeUpdate");

      // },

      // updated(el, binding, vnode, prevVnode) {

      //   binding.instance.logs.push("updated");

      // },

      beforeUnmount(el, binding, vnode, prevVnode) {

        binding.instance.logs.push("beforeUnmount");

      },

      unmounted(el, binding, vnode, prevVnode) {

        binding.instance.logs.push("unmount");

      }

    }

  }

};

</script>

​