vue2和vue3自定义指令的区别

相同点:

     指令的应用场景,原理是一致的, 除了核心指令（v-model和v-for）等外，Vue也允许我们自定义指令。

不同点:

1. 生命周期钩子函数名
2. 指令定义的格式不一样

在vue2中 :

语法: Vue.directive( ‘自定义指令名字’ , { 配置项 } )

1. 定义

// 注册一个全局的指令
Vue.directive('focus', {      // 这里取得focus 是自定义名字
  inserted: function(el, binding) {
    // 这里的el相当于是 DOM  元素  可以操作它
    el.focus()   // 自动获取焦点
    el.style.background = binding.value
    console.log('focus', el, binding)
  }
})

2.使用格式:

<input v-foucs="'xxxx'" />  xxx指的就是binding.value

在vue3中 :

语法: const app = createApp() app.directive(‘指令名’,配置对象)

1. 定义:

// app.directive('指令名',配置对象)
app.directive('imgLazy', {
  mounted (el, binding) {
    // el是指令绑定到的dom元素
    // binding 是一个对象, binding.value是: <dom v-imgLazy="binding.value的值" />
    console.log(el, binding, 'imgLazy...')
  }
})
// 2. 使用格式 <div v-imgLazy>

2. 使用格式:

<dom v-imgLazy="binding.value的值" />