Vue3：自定义指令directive

一、vue2自定义指令生命周期

• bind: function () {},
• inserted: function () {},
• update: function () {},
• componentUpdated: function () {},
• unbind: function () {}

二、vue3自定义指令生命周期

• created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

• mounted：在绑定元素的父组件被挂载后调用。

• beforeUpdate：在更新包含组件的 VNode 之前调用。

• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

• beforeUnmount：在卸载绑定元素的父组件之前调用

• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

三、使用

<template>
<!-- name:自定义参数，lcy：自定义修饰符 -->
<div v-MyDirective:name.lcy="{background: '#ccc'}">
  这是一个div
</div>
</template>


<script setup lang='ts'>
import {Directive, DirectiveBinding} from 'vue'
const vMyDirective:Directive = {
   created() {
     console.log('created');
     
   },
   beforeMount() {
     console.log('beforeMount');
   },
   mounted(...args:Array) {
     console.log('mounted');
     console.log(args);
   },
   beforeUpdate() {
      console.log('beforeUpdate');
   },
   updated() {
      console.log('updated');
   },
   beforeUnmount() {
     console.log('beforeUnmount');
   },
   unmounted() {
     console.log('unmounted');
   },

}
</script>

 四、实例

<template>
<!-- name:自定义参数，lcy：自定义修饰符 -->
<div v-MyDirective:name.lcy="{background: '#ccc', width: '200px', height: '200px'}">
  这是一个div
</div>
</template>


<script setup lang='ts'>
import {Directive, DirectiveBinding} from 'vue'

type Styles = {
  width: string,
  height: string,
  background: string
}
const vMyDirective:Directive = {
   mounted(el:HTMLElement, dir: DirectiveBinding<Styles>) {
     console.log('mounted');
     el.style.background = dir.value.background
     el.style.width = dir.value.width
     el.style.height = dir.value.height
   },
}
</script>