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

前往低代码交流专区

更多推荐