Vue3.x -- 自定义指令使用

vue3.x：自定义指令

根据文档可以知道3.x的指令比起2.x做了些改动，自定义指令的 API 改了名字，名字更贴近组件的生命周期。

• created - 新的！在元素的 attribute 或事件侦听器应用之前调用。
• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！这是在元素本身更新之前调用的，很像组件生命周期钩子。
• update → 移除！有太多的相似之处要更新，所以这是多余的，请改用 updated。
• componentUpdated → updated
• beforeUnmount：新的！与组件生命周期钩子类似，它将在卸载元素之前调用。
• unbind -> unmounted

对于2.x中自定义指令里的一些方法名与底层做了些改动

3.x的自定义指令对象类似下面的样子

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {}, // 新
  updated() {},
  beforeUnmount() {}, // 新
  unmounted() {}
}

下面根据官方的例子实现一个进入页面自动聚焦input的指令

组件内声明

在组件内部，与data同级使用

全局声明

在main.js声明

注意：要在挂载前

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

const app = createApp(App)
app.directive('focus', {
  // 当被绑定的元素挂载到 DOM 中时……
  mounted (el) {
    // 聚焦元素
    el.focus()
  }
})
app.mount('#app')
// createApp(App).mount('#app')