前言

我们知道代码的复用代码方式有组件和组合式函数两种形式，前者主要负责模板和逻辑代码的复用，而后者主要负责有状态的逻辑代码。但是我们今天要说的就是另外一种代码复用的方式，那就是自定义指令，他呢主要负责与 DOM 元素相关的复用代码。

自动定义指令

像我们熟知的 vue 自定义指令 v-model、v-if 等等以外，我们还可以根据自己的需求自定义相应的指令。下面我们就让我们来编写一个当前 input 元素被渲染时就自动聚焦的自定义指令吧。

首先，我们要知道在 <script setup> 中任何一个 v 字母开头并且驼峰式命名的变量才能被用作自定义指令。其次，该变量由一个包含类似生命周期的的对象来定义。里面的钩子函数会把该指令所绑定的元素作为入参。

<script setup>const vFocus = {  mounted: (el) => el.focus()}</script>
<template>// 在模板中使用时使用羊肉串命名法 v-focus  <input v-focus /></template>

上面的代码我们就完成了一个自定义指令了。而他与 input 的 autofocus 属性不同之处在于在 vue 动态插入元素后也会生效。

当然，我们也可以定义一个全局的自定义指令，这样在所有组件内都可以使用了。

const app = createApp({})
app.directive('focus', {  mounted(el) {    el.focus()  }})

不过还是提醒大家在需要直接操作 DOM 元素的时候再封装自定义指令，其余情况还是建议大家通过使用 v-bind 获取相应的数据来进行业务处理，这样也会让代码更明了，也会更高效，服务端渲染性能更好。