对比Vue2和Vue3的自定义指令

一、自定义指令简介

自定义指令是Vue提供的能力,用于注册自定义的指令,从而实现一些自定义的DOM操作。

二、Vue2中自定义指令

在Vue2中,自定义指令通过全局方法Vue.directive()进行注册:

// 注册全局指令v-focus
Vue.directive('focus', {
  inserted: function(el) {
    el.focus() 
  }  
})
1
2
3
4
5
6

使用：

<input v-focus> 
1
2

也可以局部注册:

directives: {
  focus: {
    inserted: function(el) {
      el.focus()
    }
  }
}
1
2
3
4
5
6
7

然后在模板中通过v-xxx方式使用。

三、Vue3中自定义指令

在Vue3中,自定义指令通过全局方法app.directive()注册:

// 注册全局指令v-focus  
app.directive('focus', {
  mounted(el) {
    el.focus() 
  }
})
1
2
3
4
5
6

使用：

<input v-focus>
1

局部注册:

directives: {
  focus: {
    mounted(el) {
      el.focus() 
    }
  }
}
1
2
3
4
5
6
7

四、Vue2与Vue3自定义指令区别

vue3中的自定义指令在源码实现上与vue2有以下主要不同:

注册方式不同

vue2是通过Vue.directive()注册全局自定义指令,组件内通过directives选项注册局部自定义指令。

vue3是通过app.directive()注册全局自定义指令,组件内通过directives选项注册局部自定义指令。

钩子函数变化

vue2的钩子函数有bind、inserted、update等。

vue3只提供了beforeMount和mounted两个钩子函数。

钩子函数参数变化

vue2的钩子函数默认会传入el、binding等参数。

vue3的钩子函数不再默认传入任何参数,需要手动指定需要的参数。

实现机制不同

vue2中的自定义指令是通过Directive类实现的。

vue3中不再有Directive类,自定义指令直接通过钩子函数实现。

渲染函数处理不同

vue2的编译阶段会处理自定义指令,生成自定义指令的渲染函数。

vue3的编译阶段不再处理自定义指令,自定义指令逻辑全部在钩子函数中实现。

vue3对自定义指令的实现做了大幅精简,通过钩子函数直接实现自定义逻辑,渲染层面不再处理自定义指令,以此简化了内部逻辑

五、示例

输入框获取焦点示例:

Vue2:

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
}) 
1
2
3
4
5

Vue3:

app.directive('focus', {
  mounted(el) {
    el.focus() 
  }  
})
1
2
3
4
5