Vue3 钩子函数

Vue3 钩子函数
钩子
钩子函数
指令定义函数提供了几个钩子函数(可选):
 
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')

推荐阅读