vue2和vue3的自定义指令

1.什么是自定义指令

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

2.vue2中自定义指令

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

Vue.directive('focus', {
  inserted: function(el) {
    el.focus() 
  }  
})

使用:

<input v-focus> 

也可以局部注册:
 

directives: {
  focus: {
    inserted: function(el) {
      el.focus()
    }
  }
}

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

3.Vue3中自定义指令

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

// 注册全局指令v-focus  
app.directive('focus', {
  mounted(el) {
    el.focus() 
  }
})

使用:

<input v-focus>

局部注册:

directives: {
  focus: {
    mounted(el) {
      el.focus() 
    }
  }
}

4.vue2与vue3自定义指令区别:注册方式不同,钩子函数变化,钩子函数参数变化,实现机制不同,渲染函数处理不同。