在大多数状况下，你都能够操作数据来批改视图，或者反之。然而还是防止不了偶然要操作原生 DOM，这时候，你就能用到自定义指令。
举个例子，你想让页面的文本框主动聚焦，在没有学习自定义指令的时候，咱们可能会这么做。
const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`,}); 在mounted钩子函数里，通过 $refs 获取须要聚焦的 DOM 元素，而后调用 focus 办法实现主动聚焦的性能。
根本应用
下面做法曾经实现了咱们须要的性能，然而如果说咱们有多个组件都须要这个性能，那咱们只能把这段代码复制过来，从新实现逻辑。咱们上面看下如果应用自定义指令，应该怎么做。
const app = Vue.createApp({ // 通过 v-[自定义指令名称] 绑定自定义指令 template: `<input type="text" v-focus/>`,});// 注册一个全局自定义指令app.directive('focus',{ // 当被绑定的元素插入到DOM的时候执行.. mounted(el){ el.focus(); }}) 如上，咱们定义了一个全局自定义指令 focus，并通过 v-focus 绑定到须要聚焦的 input 元素上。如果，其余组件或模块也须要聚焦性能，只有简略的绑定此指令即可。
自定义指令的钩子函数
咱们在下面定义指令的时候，会发现其中蕴含了 mounted 钩子函数，指令还提供了如下钩子函数，咱们用代码的模式来给大家列出来。
app.directive('directiveName', { // 指令绑定元素挂载前 beforeMount(el) {}, // 指令绑定元素挂载后 mounted(el, binding) {}, // 指令绑定元素因为数据批改触发批改前 beforeUpdate(el) {}, // 指令绑定元素因为数据批改触发批改后 updated(el) {}, // 指令绑定元素销毁前 beforeUnmount(el) {}, // 指令绑定元素销毁后 unmounted(el) {},}); 成果就不一一列举了，有趣味大家能够尝试下别离触发这些钩子函数。指令钩子函数大部分与组件很相似，大家能够比照着来看。
动静指令参数
上面，咱们再来看一个例子。
const app = Vue.createApp({ template: `<div class="box" v-abs-top="num" ></div>`,});// 在很多时候，你可能想在 mounted 和 updated 时触发雷同行为，而不关怀其它的钩子，就这样写app.directive('absTop', (el) => { el.style[binding.arg] = '100px';}); 咱们在 div 元素上绑定 absTop 指令，div 元素自身定位是 absolute，指令执行让绑定元素的 top 为 100px。这时候，我想在绑定指令的时候可能传一个参数，使得元素的 top 值能够依据参数来扭转。代码如下：
const app = Vue.createApp({ data() { return { num: 100 } }, template: `<div class="box" v-abs-top="num"></div>`,});app.directive('absTop', (el, binding) => { el.style.top = binding.value + 'px';}); 元素能够通过 v-directive="value" 传入动静参数，指令通过钩子函数的第二个参数 binding.value 来接管参数。
如果其余元素可能不是批改 top 的值，有可能是 left、right 或者 bottom，那么指令能够动静指定吗？其实也是能够做到的。首先，咱们批改模板为：
<div class="box" v-abs:left="num"></div> 而后批改指令自身
app.directive('absTop', (el, binding) => { el.style[binding.arg] = binding.value + 'px';}); 在 v-mydirective:[argument]="value" ，arguments 也是能够动静扭转的，这样，就能够完满的实现上述要求了。
组件的应用
组件中绑定指令与 DOM元素绑定指令并没有什么不同，指令会获取组件的原生 根DOM 来操作。然而要留神的是，在 vue3.0 中，组件可能有多个根节点，指令绑定在多根节点组件是有问题的。
部分自定义指令
最初，再来简略说下部分自定义指令是怎么定义的。
const app = Vue.createApp({directives: { focus: { // 指令的定义 mounted(el) { el.focus() } } }} 部分指令定义和全局指令基本一致，如上所示，在组件中定义 directives 就能够了。
总结
自定义指令能够提取出原生DOM操作的逻辑。所以指令的利用范畴次要体现在，当一些操作波及到 DOM 底层时，而且操作逻辑可能用于多处中央，就适宜用指令来封装这些逻辑。