Vue3-高级特性

一、Vue中自定义指令

1.认识自定义指令

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

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

自定义指令分为两种:

• 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；

• 自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

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

• 实现方式一：如果我们使用默认的实现方式；

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

• 实现方式三：自定义一个 v-focus 的全局指令；

1.1默认实现

1.2自定义局部指令

• 这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可；

• 它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）；

• 自定义指令有一个生命周期，是在组件挂载后调用的 mounted，我们可以在其中完成操作；

1.3自定义全局指令

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

import {
    createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.directive('focus', {
   
  mounted(el) {
   
    el.focus()
  }
})
app.mount('#app');

2.指令的生命周期

一个指令定义的对象，Vue提供了如下的几个钩子函数（都是可选的）：

◼ created：在绑定元素的 attribute 或事件监听器被应用之前调用；

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

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

◼ beforeUpdate：在更新包含组件的 VNode 之前调用；

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

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

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

3.指令的参数和修饰符

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

• foo是参数的名称；

• bar是修饰符的名称；

• 后面是传入的具体的值；

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

4.自定义指令练习

自定义指令案例：时间戳的显示需求：

• 在开发中，大多数情况