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