关于前端:Vue3x-自定义指令使用

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