vue3自定义指令的学习和常用的几个自定义指令

除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令，接下来我们一起学习一下

·在开发Vue项目时，大多数人都会使用到Vue内置的一些指令，例如v-model、v-if等，
在使用的时候不知道有没有想过自己也来实现一个指令呢。本文就以Vue3项目为基础，从原理、方法到实际案例、注意事项，尽可能细致的讲解如何自定义指令。

##　首先我们要明白为什么需要自定义指令，目的是为了简洁可重复操作ＤＯＭ的逻辑，也就和组件化和组合式函数差不多

不管ｖｕｅ的内置指令还是自定义指令，都有类似组件的生命周期，我们可以在不同的生命周期完成不同的逻辑操作处理，并绑定在组件元素上，这样也就产生了自定义指令，在ｖｕｅ３中，我们有３中方式
定义指令：

·1 在 script setup 定义组件内的指令

有一个语法糖：任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令，然后在模板中使用

来个栗子：在输入框渲染后自动聚焦

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>