Vue基础教程（55）自定义指令之注册自定义指令：Vue自定义指令指南：打造你的专属“懒人外挂”，让代码学会自己干活！-优快云博客

一、为什么需要自定义指令？因为懒是人类进步的第一动力！

兄弟们，摸着自己良心说，你们有没有遇到过这种场景：

项目里一堆按钮要判断权限，每次都是v-if="hasPermission('add_user')"，复制粘贴到手软？
图片懒加载写了N遍，每个页面都要引入一次懒加载逻辑？
想一键让输入框自动聚焦，结果发现原生的autofocus在单页面应用里像个“薛定谔的猫”——时灵时不灵？

这时候，就该自定义指令闪亮登场了！它就像是给你的Vue组件装备了“外挂技能”，把那些重复性的DOM操作打包成一个简洁的指令。下次再用，直接一句v-permission="'add_user'"或者v-lazy，清爽得就像喝了无糖可乐！

简单说，Vue自带指令（像v-if、v-for）是官方给的“标准装备”，而自定义指令就是你根据自己的业务需求打造的“专属神器”。用好它，你的代码将发生三大变化：

复用性UP↑：一次定义，终身受用（至少在当前项目里）。
可读性UP↑：v-loading比一坨<div v-if="loading">加载中...</div>优雅多了。
维护性UP↑：逻辑集中管理，改bug只需动一个地方。

二、指令注册的两种姿势：全局注册 vs 局部注册

注册自定义指令有两种方式，好比你要学武功——是加入名门正派（全局注册）学通用功法，还是找个师父私下传授（局部注册）独门绝技？

姿势一：全局注册——打造项目级“瑞士军刀”

如果你有一个指令，希望在任何组件里都能随用随取，比如权限判断、图片懒加载，那就全局注册。这相当于给整个Vue应用安装了“全民外挂”。

在main.js里这样操作：

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

const app = createApp(App)

// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素挂载到DOM上时触发
  mounted(el) {
    // 聚焦元素
    el.focus()
  }
})

app.mount('#app')

使用效果：
现在，在任何组件的模板里，你都可以直接使用v-focus：

<!-- 在任何组件中 -->
<template>
  <input v-focus pl