Vue3高级语法补充

自定义指令

认识自定义指令

在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue 也允许我们来自定义自己的指令。

注意：在Vue中，代码的复用和抽象主要还是通过组件；
通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；

自定义指令分为两种：

自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

比如我们来做一个非常简单的案例：当某个元素挂载完成后可以自定获取焦点

实现方式一：如果我们使用默认的实现方式；
实现方式二：自定义一个 v-focus 的局部指令；
实现方式三：自定义一个 v-focus 的全局指令；

实现方式一：默认实现

实现方式二：局部自定义指令

实现方式二：自定义一个 v-focus 的局部指令

这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可；
它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）；
自定义指令有一个生命周期，是在组件挂载后调用的 mounted，我们可以在其中完成操作；

注意：参数bindings可以拿到使用该指令的组件或元素上指令的参数和修饰符等信息。后面会说。

方式三：自定义全局指令

自定义一个全局的v-focus指令可以让我们在任何地方直接使用

指令的生命周期

一个指令定义的对象，Vue提供了如下的几个钩子函数：

**created：**在绑定元素的 attribute 或事件监听器被应用之前调用；
**beforeMount：**当指令第一次绑定到元素并且在挂载父组件之前调用；
**mounted：**在绑定元素的父组件被挂载后调用； n
**beforeUpdate：**在更新包含组件的 VNode 之前调用；
**updated：**在包含组件的 VNode 及其子组件的 VNode 更新后调用；
**beforeUnmount：**在卸载绑定元素的父组件之前调用；
**unmounted：**当指令与元素解除绑定且父组件已卸载时，只调用一次；

指令的参数和修饰符

如果我们指令需要接受一些参数或者修饰符应该如何操作呢？

info是参数的名称；
aaa-bbb是修饰符的名称；
后面是传入的具体的值；

在我们的生命周期中，我们可以通过 bindings 获取到对应的内容：

<template>
  <div>
    <h2>当前计数：{{ counter }}</h2>
    <!-- 事件修饰符和参数 aaa bbb 是修饰符 等于号右边参数 -->
    <button v-mao.aaa.bbb="'字符串毛毛！'" @click="increment">+1</button>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue';
export default {
  // 局部组件在 directives属性里面定义
  directives: {
    mao: {
      // 指令的生命周期
      created(el, bindings, vnode, preVnode) {
        console.log('v-mao created ......')
        console.log(el, bindings, vnode, preVnode);
        console.log("v-mao指令的参数：", bindings.value);
        // 通过 bindings的 modifiers 属性获取修饰符， modifiers是一个对象，修饰符是该对象的属性
        // 只要用了这个修饰符，值就是 true
        console.log("v-mao指令的修饰符：", bindings.modifiers);
      },
      beforeMount() {
        console.log('v-mao beforeMount ......');
      },
      mounted() {
        console.log('v-mao mounted ......');
      },
      // 只要指令所在的元素或组件发生了改变，包括属性等发生改变，都会调用这两个生命周期
      beforeUpdate() {
        console.log('v-mao beforeUpdate ......');
      },
      updated() {
        console.log('v-mao updated ......');
      },
      beforeUnmount() {
        console.log('v-mao beforeUnmount ......');
      },
      unmounted() {
        console.log('v-mao unmounted ......');
      },
    }
  },
  setup() {
    const counter = ref(0);
    const increment = () => counter.value++
    return {
      counter, increment
    }
  }

}
</script>

<style scoped>
</style>