前言

我们知道代码的复用代码方式有组件和组合式函数两种形式，前者主要负责模板和逻辑代码的复用，而后者主要负责有状态的逻辑代码。但是我们今天要说的就是另外一种代码复用的方式，那就是自定义指令，他呢主要负责与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获取相应的数据来进行业务处理，这样也会让代码更明了，也会更高效，服务端渲染性能更好。