钩子

钩子函数

指令定义函数提供了几个钩子函数（可选）：

 

created : 在绑定元素的属性或事件监听器被应用之前调用。

 

beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。。

 

mounted : 在绑定元素的父组件被挂载后调用。。

 

beforeUpdate: 在更新包含组件的 VNode 之前调用。。

 

updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。

 

beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。

 

unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。

 

实例

import { createApp } from 'vue'

const app = createApp({})

 

// 注册

app.directive('my-directive', {

  // 指令是具有一组生命周期的钩子：

  // 在绑定元素的 attribute 或事件监听器被应用之前调用

  created() {},

  // 在绑定元素的父组件挂载之前调用

  beforeMount() {},

  // 绑定元素的父组件被挂载时调用

  mounted() {},

  // 在包含组件的 VNode 更新之前调用

  beforeUpdate() {},

  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用

  updated() {},

  // 在绑定元素的父组件卸载之前调用

  beforeUnmount() {},

  // 卸载绑定元素的父组件时调用

  unmounted() {}

})

 

// 注册 (功能指令)

app.directive('my-directive', () => {

  // 这将被作为 `mounted` 和 `updated` 调用

})

 

// getter, 如果已注册，则返回指令定义

const myDirective = app.directive('my-directive')