Vue3 学习笔记 —— 破坏式更新、自定义指令 directive

Lyrelion

已于 2022-12-04 16:42:19 修改

阅读量1.4k

点赞数

分类专栏： Vue3 文章标签： directive 自定义指令

于 2022-12-04 16:41:35 首次发布

本文链接：https://blog.csdn.net/Lyrelion/article/details/128173202

版权

Vue3 专栏收录该内容

24 篇文章 20 订阅

订阅专栏

1. 什么叫破坏式更新？

2. Vue3 中的自定义指令

2.1 自定义指令的生命周期

2.1.1 Vue2 Vs Vue3 的自定义指令生命周期

2.1.2 自定义指令的生命周期中，接收的参数

2.2 定义一个自定义指令

2.2.1 在 setup 中定义自定义指令（此处为对象形式）

2.2.2 在 setup 中定义自定义指令（此处为函数简写形式）

2.3 自定义指令 Demo —— 实现拖动

1. 什么叫破坏式更新？

有一个方法，传入一个对象并返回结果。在方法结束之后，传入的参数对象也被改变了，这就是破坏式更新。

java8函数式编程笔记-破坏式更新和函数式更新_weixin_33946020的博客-CSDN博客破坏式更新和函数式更新什么是破坏式更新和函数式更新：破坏式更新：有一个方法，传入一个对象并返回结果。在方法结束之后传入的参数对象也被改变了，这就是破坏式更新。你不能保证调用这个方法之后后续是否还会使用传入的参数对象，因此破坏式更新在java的函数式编程中是不被提倡的。这也是另一种副作用。函数式更新: 用函数式编程的方法解决问题，强调没有任何副作用破坏式更新例子:我们有一个类用...https://blog.csdn.net/weixin_33946020/article/details/91403872

前面的 v-model，以及本章 directive 都属于破坏式更新

2. Vue3 中的自定义指令

v-if、v-show、v-for、v-model、v-on、v-bind 等，都是 vue 内置的指令

2.1 自定义指令的生命周期

2.1.1 Vue2 Vs Vue3 的自定义指令生命周期

Vue2 中，自定义指令的生命周期，区别于组件的生命周期：

bind
inserted
update
componentUpdated
unbind

Vue3 中，自定义指令的生命周期，类似于组件的生命周期：

created —— 元素初始化时执行
beforeMount —— 指令绑定到元素后执行，只执行一次
mounted —— 元素插入父级 DOM 时执行
beforeUpdate —— 元素被更新之前执行
updated —— 元素更新后执行（注意：带 d）
beforeUnmount —— 元素被移除前执行
unmounted —— 指令被移除后执行，只执行一次

2.1.2 自定义指令的生命周期中，接收的参数

参数一：el —— 当前绑定的 DOM 元素

参数二：binding —— 自定义指令接收的值

instance：使用自定义指令的组件实例
value：传递给指令的值（在 v-my-directive="{ color: 'red' }" 中，该值为 { color: 'red' }）
oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用，无论值是否有更改都可用
arg：传递给指令的参数（在 v-my-directive:test 中，arg 为 "test"）
modifiers：包含修饰符的对象（在 v-my-directive.foo.bar 中，修饰符对象为 { foo: true，bar: true })
dir：一个对象，在注册指令时，作为参数传递，包含了自定义指令生命周期

参数三：自定义指令绑定的元素的虚拟 DOM，也就是 Vnode

参数四：prevNode 上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用

2.2 定义一个自定义指令

自定义指令命名，必须符合一定的规则 —— vNameOfDirective

2.2.1 在 setup 中定义自定义指令（此处为对象形式）

自定义指令的大部分生命周期，都能接收到 2.1.2 中提到的参数

根据这些参数，我们可以对绑定指令的 DOM 元素进行各种操作

 const vColorDirective: Directive = {
  created: () => {
    console.log("------ 初始化 ------");
  },
  beforeMount(...args: Array<any>) {
    // 在元素上做些操作
    console.log("------ 初始化一次 ------");
  },
  mounted(el: any, dir: DirectiveBinding<Value>) {
    el.style.background = dir.value.background;
    console.log("------ 初始化 ------");
  },
  beforeUpdate() {
    console.log("------ 更新之前 ------");
  },
  updated() {
    // 动态绑定的值 改变时 触发
    console.log("------ 更新结束 ------");
  },
  beforeUnmount(...args: Array<any>) {
    console.log(args);
    console.log("------ 卸载之前 ------");
  },
  unmounted(...args: Array<any>) {
    console.log("------ 卸载完成 ------");
  },
};

在模板中使用自定义指令：

<template>
  <button @click="show = !show">动态改变的值 —— {{ show }}</button>
  <Dialog v-color-directive="{ background: 'red', flag: show }"></Dialog>
</template>

2.2.2 在 setup 中定义自定义指令（此处为函数简写形式）

在 mounted 和 updated 时，触发相同的行为，其他生命周期内不做任何操作

<template>
   <div>
      <input v-model="value" type="text" />
      <div v-color-directive="{ background: value }"></div>
   </div>
</template>
   
<script setup lang='ts'>
import { ref, Directive, DirectiveBinding } from 'vue'

// 输入框双向绑定的值，用于输入各种颜色
let value = ref<string>('')

type Dir = {
   background: string
}

// 这里用函数定义了自定义指令，而不是对象了
const vColorDirective: Directive = (el: HTMLElement, binding: DirectiveBinding<Dir>) => {
   // 每次输入的值改变，都会改变背景颜色
   el.style.background = binding.value.background
}

</script>

2.3 自定义指令 Demo —— 实现拖动

实现过程：

定义函数自定义指令
获取可以被拖拽的的 DOM，也就是头部
给可拖拽部分的 DOM，添加鼠标按下时的事件监听
记录鼠标落下的位置（为了避免移动时，计算的距离不对）
全局添加移动监听，在移动监听的函数里，获取移动的距离，并且移动元素
鼠标抬起时，移除全局添加的移动监听

<template>
   <div v-drag class="box">
      <div class="header"> 头部 - 可拖拽 </div>
      <div> 身体 - 不可拖拽 </div>
   </div>
</template>
   
<script setup lang='ts'>
import { ref, Directive, DirectiveBinding } from 'vue'

// 这里用函数定义了自定义指令，而不是对象了
const vDrag: Directive<any, void> = (el: HTMLElement, binding: DirectiveBinding) => {
   // 获取可以被拖拽的的 DOM，也就是头部
   let dragElement: HTMLDivElement = el.firstElementChild && HTMLDivElement

   // 鼠标按下的事件
   const mouseDown = (e: MouseEvent) => {
     // 记录鼠标落下的位置（为了避免移动时，计算的距离不对）
     let moX = e.clientX - el.offsetLeft;
     let moY = e.clientY - el.offsetTop;

     // 定义移动事件函数
     const move = (e: MouseEvent) => {
       // 从这里可以获取移动时的坐标
       console.log('获取移动时的坐标 ---', e);
       // 移动元素（记得 减掉 鼠标最初按下的位置）
       el.style.left = e.clientX - moX + 'px';
       el.style.top = e.clientY - moY + 'px';
     };

     // 全局添加移动监听
     document.addEventListener('mousemove', move);

     // 鼠标抬起时，取消监听 全局鼠标移动 事件
     document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', move);
     });
   };

   // 给可拖拽部分的 DOM，添加事件监听
   dragElement.addEventListener('mousedown', mouseDown);
}

</script>