<template>
  <div>
    <el-button @click="count++">count++</el-button>
    <div v-init="{updateCount: 3}" ref="ref_init">
      自定义指令《v-init》<br/>
      count：{{count}}<br/>
      updateCount：{{ref_init?.dataset.updateCount}}
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    toRefs,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    computed,
  } from "vue";

  export default defineComponent({
    name: "",
    components: {
    },
    setup() {
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
      const state = reactive({
        count: 0,
      });
      const ref_init = ref()
      onMounted(() => {
      })
      return {
        ...toRefs(state),
        ref_init
      }
    },
    directives: {
      // 在模板中启用 v-focus
      init: {
        // 在绑定元素的 attribute 前
        // 或事件监听器应用前调用
        created(el, binding, vnode, prevVnode) {
          el.dataset.updateCount = binding.value.updateCount
          const d = document.createElement('div')
          d.innerHTML = 'init-create'
          el.appendChild(d)
          // 下面会介绍各个参数的细节
        },
        // 在元素被插入到 DOM 前调用
        beforeMount(el, binding, vnode, prevVnode) {
          const d = document.createElement('div')
          d.innerHTML = 'init-beforeMount'
          el.appendChild(d)
        },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都挂载完成后调用
        mounted(el, binding, vnode, prevVnode) {
          const d = document.createElement('div')
          d.innerHTML = 'init-mounted'
          el.appendChild(d)
        },
        // 绑定元素的父组件更新前调用
        beforeUpdate(el, binding, vnode, prevVnode) {
          const d = document.createElement('div')
          d.innerHTML = 'init-beforeUpdate'
          el.appendChild(d)
        },
        // 在绑定元素的父组件
        // 及他自己的所有子节点都更新后调用
        updated(el, binding, vnode, prevVnode) {
          const d = document.createElement('div')
          d.innerHTML = 'init-updated' + el.dataset.updateCount++
          el.appendChild(d)
        },
        // 绑定元素的父组件卸载前调用
        beforeUnmount(el, binding, vnode, prevVnode) {
        },
        // 绑定元素的父组件卸载后调用
        unmounted(el, binding, vnode, prevVnode) {}
      }
    }
  });
</script>
<!--<script setup>-->
<!--// 在模板中启用 v-focus-->
<!--const vFocus = {-->
<!--  mounted: (el) => {-->
<!--    console.log(123)-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  <input v-focus />-->
<!--</template>-->
<style scoped lang="scss">
</style>
