vue3.2自定义指令语法糖+ts和!ts

vue2有13种指令: v-once v-bind v-model v-if 等当这几种指令不满足自己的使用的时候可以自定义指令的*vue2指令的钩子 bind insert update component Updated unbind
vue3的指令和vue2的不一致

1.vue3的指令的钩子函数：

created 元素初始化的时候
beforeMount指令绑定到元素后调用 只调用一次
Mounted元素插入父级Do’m调用
beforeUpdate 元素被更新之前调用
updated 在包含组件的 VNode 及其子组件的 VNode 更新后调用
beforeUnmount在元素被移除前调用
unmounted指令被移除后调用 只调用一次

vue3的setup语法糖写法
directi.vue

<template>
    <div class="dire">
            A
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.dire{
    width:200px;height: 200px;border: 1px solid #000;
}
</style>

<template>
  <div> 
     <directi v-if="flag" v-move="{background:'red',flag:flag}"></directi> 
     //测试更新钩子
      <!--<directi   v-move="{background:'red',flag:flag}"></directi>-->
  </div>
</template>

<script   setup>
import  {ref} from 'vue'
import  directi from './components/directi.vue' 
const  flag=ref(true)
const vMove={
  // 初始化加载下面3
  created() {
    console.log('created')
  },
  beforeMount() {
     console.log('beforeMount')
  }, 
  mounted(el,dir) {
     console.log('mounted',dir.value.background)
    el.style.background=dir.value.background;
  },

  beforeUpdate() {
     console.log('beforeUpdate')
    
  },
  updated(){
     console.log('updated')

  },
// 销毁触发下面2
  beforeUnmount(){
     console.log('beforeUnmount')

  },
  unmounted(){
     console.log('unmounted')

  }
}
 



</script>

<style scoped>

</style>

VUE3+ts写法：

<template>
  <div> 
     <button @click="flag=!flag">切换</button>
     //测试显示隐藏触发的钩子
     <directi v-if="flag" v-move:aaa.xiaozhu="{background:'red',flag:flag}"></directi>
     // 测试更新触发的钩子
     <!-- <directi  v-move="{background:'red',flag:flag}"></directi> -->
    
  </div>
</template>

<script   setup lang="ts">
import  {ref,Directive, DirectiveBinding} from 'vue'
import  directi from './components/directi.vue' 
const flag=ref<Boolean>(true);
type Dir={
   background:string
}
const vMove:Directive={
  // 初始化加载下面3
  created() {
    console.log('created')
  },
  beforeMount() {
     console.log('beforeMount')
  }, 
  mounted(el:HTMLElement,dir:DirectiveBinding<Dir>) {
     console.log('mounted',dir.value.background)
    el.style.background=dir.value.background;
  },

  beforeUpdate() {
     console.log('beforeUpdate')
    
  },
  updated(){
     console.log('updated') 
  },
// 销毁触发下面2
  beforeUnmount(){
     console.log('beforeUnmount') 
  },
  unmounted(){
     console.log('unmounted') 
  }
} 
</script>

<style scoped>

</style>

自定义指令函数简写：

<template>
  <div> 
     <button @click="flag=!flag">切换</button>
     //测试显示隐藏触发的钩子
     <directi v-if="flag" v-move:aaa.xiaozhu="{background:'red',flag:flag}"></directi>
     // 测试更新触发的钩子
     <!-- <directi  v-move="{background:'red',flag:flag}"></directi> -->
    
  </div>
</template>

<script   setup lang="ts">
import  {ref,Directive, DirectiveBinding} from 'vue'
import  directi from './components/directi.vue' 
const flag=ref<Boolean>(true);
type Dir={
   background:string
}
const vMove:Directive=(el:HTMLElement,bingding:DirectiveBinding<Dir>)=>{
 el.style.background=bingding.value.background
}
 
</script>

<style scoped>

</style>