vue2和vue3的自定义指令

最新推荐文章于 2024-07-31 14:35:30 发布

Clavicle·

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量616

点赞数 18

文章标签：前端

本文链接：https://blog.csdn.net/2302_77774994/article/details/136544727

版权

本文阐述了Vue3中自定义指令的六个生命周期阶段变化，并通过实例演示了在Vue3中全局和局部指令的实现。

摘要由CSDN通过智能技术生成

在 Vue 3 中，自定义指令的生命周期钩子与 Vue 2 中的有所不同。Vue 3 中的自定义指令生命周期钩子包括以下几个：

1.beforeMount： 在元素挂载到 DOM 之前调用。
2.mounted： 在元素挂载到 DOM 后立即调用。
3.beforeUpdate： 在更新元素之前调用，但是在子组件更新之前调用。
4.updated： 在元素及其子组件被更新后调用。
5.beforeUnmount： 在卸载元素之前调用。
6.unmounted： 在卸载元素后调用。

Vue.js 3 中的自定义指令：
局部实现
在这里插入图片描述
效果

下面是一个局部小案例实现裂图

效果

全局自定义指令
在main.ts中
在这里插入图片描述
在组件中

<template>
     <div>

    <img style="width: 200px; height: 200px" :src="img1" alt="" v-img="arr" />
    <button @click="btn">点击三下变裂图</button>
     </div>
</template>

<script setup lang="ts">
import img1 from "../assets/1.png";
import { ref } from "vue";
const arr = ref(0);
const btn = () => {
  arr.value++;
};
</script>

<style>

</style>

也是相同的效果
在这里插入图片描述

vue2自定义指令

在 Vue 2 中，自定义指令的生命周期钩子包括以下几个：

bind： 当指令第一次绑定到元素时调用。这里可以执行一次性的初始化设置。

inserted： 当被绑定的元素插入到 DOM 中时调用。这里可以执行一些初始 DOM 操作。

update： 在组件更新时会触发，但是可能会在其子组件更新之前触发。这里可以执行一些更新 DOM 的操作。

componentUpdated： 在组件更新完成后调用，所有的子组件也已经更新完毕。这里可以执行一些需要依赖于子组件状态的操作。

unbind： 当指令与元素解绑时调用。这里可以执行一些清理工作，比如移除事件监听器等。

<template>
   <div v-caa>
        
   </div>
</template>

<script>

export default{
  setup() {},
  directives: {
    // 指令名
    caa: {
      // 生命周期
      mounted(el) {
        // 处理DOM的逻辑
        el.innerHTML='11111'
      },
    }
  }
}
</script>

<style scoped >

</style>