vue生命周期

花开莫与流年错_

已于 2023-02-10 09:43:41 修改

阅读量80

点赞数

分类专栏：网站前端文章标签： vue.js 前端 javascript vue声明周期事件处理

于 2023-02-10 09:35:20 首次发布

本文链接：https://blog.csdn.net/qq_17242837/article/details/128964303

版权

网站同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

文章介绍了Vue中指令的生命周期钩子，包括created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等各个阶段，展示了如何注册和使用自定义指令，并提供了示例代码进行说明。

摘要由CSDN通过智能技术生成

生命周期钩子

示例

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')

vue中示例代码

<script>  //  lang="ts" setup

function LogIn_Click() {
  // window.open("https://www.baidu.com");           /* 打开新页面 */
  window.location.href="/#/login";   /* 切换当前页面 */
}

export default {
  // 指令具有一组生命周期钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {
    console.log("created");
  },
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {
    console.log("beforeMount");
  },
  // 在绑定元素的父组件挂载之后调用
  mounted() {
    console.log("mounted");
  },
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {
    console.log("updated");
  },
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  // 在绑定元素的父组件卸载之后调用
  unmounted() {
    console.log("unmounted");
  }
}
</script>