Vue: 生命周期钩子函数

最新推荐文章于 2024-05-20 09:59:35 发布

小公鸡卡哇伊呀~

最新推荐文章于 2024-05-20 09:59:35 发布

阅读量650

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/ftell/article/details/121877243

版权

本文通过实例代码介绍了Vue.js的两个重要生命周期钩子函数——beforeUnmount和unmounted。通过在组件挂载后3秒卸载组件，展示了这两个钩子在实际应用中的运行顺序和作用。在开发者工具中设置断点，可以清晰地观察到页面状态的变化，加深对Vue组件生命周期的理解。

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

Vue 有 8 个生命周期钩子函数：
在这里插入图片描述

测试 unmounted 和 beforeUnmount() 代码如下：

const app = Vue.createApp({
  data() {
    return {
    };
  },
  methods: {
  },
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  unmounted() {
    console.log("unmounted");
  },
});
app.mount("#app");

// 在 app mount 完成后3秒之后，调用 unmount() 移除 app：
setTimeout(function () {
  app.unmount();  
}, 3000);