Vue3.0 directive的使用说明

1. 指令生命周期关键字变更

• 在3.0中指令的注册和其生命周期是这样的

import {
      createApp } from 'vue'
const app = createApp({
     })

// 注册
app.directive('my-directive', {
     
  // Directive has a set of lifecycle hooks:
  // called before bound element's parent component is mounted
  beforeMount() {
     },
  // called when bound element's parent component is mounted
  mounted() {
     },
  // called before the containing component's VNode is updated
  beforeUpdate() {
     },
  // called after the containing component's VNode and the VNodes of its children // have updated
  updated() {
     },
  // called before the bound element's parent component is unmounted
  beforeUnmount() {
     },
  // called when the bound element's parent component is unmounted
  unmounted() {
     }
})

• 在2.x中指令的注册和其生命周期是这样的

import Vue from 'vue'
// 注册
Vue.directive('my-directive', {
     
  bind: function () {
     },
  inserted: function () {
     },
  update: function () {
     },
  componentUpdated: function () {
     },
  unbind: function () {
     }
})

2. 全局directive

• 与Vue 2.x的使用方法基本相同
• 在main.js中添加全局directive。
• 在3.0中创建vue实例的方式不再是new Vue，而是使用createApp方法进行创建

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

const app = createApp(App)

app.directive('focus', {
     
    // When the bound element is mounted into the DOM...
    mounted(el) {
     
        // Focus the element
        console.log(el);
        el.focus()
    }
})
app.mount('#app')

• 在其他单文件组件调用全局directive

<template>
	<input type="text" name="" id="" v-focus>
template>

3. 局部使用directive

• 与Vue 2.x的使用方法基本相同
• 在单文件组件中使用directive

<template>
	<input type="text" name="" id="" v-focus>
</template>

<script>
export default {
     
  name: 'HelloWorld',
  props: {
     
    msg: String
  },
  data() {
      return {
      };},
  directives: {
     
    focus: {
     
    	// 参数 el, binding, vnode, oldVnode
    	mounted: function (el) {
      
	       el.focus()
	    }
    }
 }
}
</script>