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同级使用

<template>
  <input v-focus>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  directives: {
    focus: {
      // 指令的定义
      mounted (el) {
        el.focus()
      }
    }
  }
}
</script>

全局声明

在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')