Vue3.0 directive的使用说明

柔光的暖阳◎ 2022-12-05 12:11 335阅读 0赞

## 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`

## 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>