vue的生命周期

 

目录

​编辑

前言

创建阶段（Creation）

beforeCreate（创建前）

created（创建后）

beforeMount（挂载前）

mounted（挂载后）

更新阶段（Updating）

beforeUpdate（更新前）

updated（更新后）

销毁阶段（Destruction）

beforeDestroy（销毁前）

destroyed（销毁后）

例子

我的其他博客

---

前言

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。Vue 实例在其生命周期中经历不同的阶段，每个阶段都触发特定的钩子函数，使开发者能够在不同的时机执行自定义的逻辑。Vue 的生命周期可以分为创建阶段、更新阶段和销毁阶段。

创建阶段（Creation）

1. beforeCreate（创建前）

   • 在实例初始化之后，数据观测（data observer）和事件配置之前被调用。
   • 此时实例还未初始化完成，无法访问数据和方法。

2. created（创建后）

   • 在实例创建完成后立即调用。
   • 可以访问数据和方法，但是模板编译还未开始，DOM 元素还未挂载。

3. beforeMount（挂载前）

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted（挂载后）

   • el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
   • 可以访问到挂载后的 DOM 元素。

更新阶段（Updating）

1. beforeUpdate（更新前）

   • 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

2. updated（更新后）

   • 在数据更改导致的重新渲染和打补丁之后调用。
   • 可以访问更新后的 DOM 元素。

销毁阶段（Destruction）

1. beforeDestroy（销毁前）

   • 在实例销毁之前调用。此时实例仍然完全可用。

2. destroyed（销毁后）

   • 在实例销毁后调用。
   • 所有的事件监听器被移除，所有的子实例也被销毁。

例子

new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: ', this.message);
  },
  created() {
    console.log('created: ', this.message);
  },
  beforeMount() {
    console.log('beforeMount: ', this.$el);
  },
  mounted() {
    console.log('mounted: ', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: ', this.message);
  },
  updated() {
    console.log('updated: ', this.message);
  },
  beforeDestroy() {
    console.log('beforeDestroy: ', this.message);
  },
  destroyed() {
    console.log('destroyed: ', this.message);
  }
});

以上代码演示了 Vue 实例生命周期各个阶段的钩子函数。在实际应用中，可以利用这些钩子函数执行一些初始化、清理、数据请求等操作

我的其他博客

Git命令大全：从基础到高级应用-CSDN博客

简单介绍一些其他的树-CSDN博客

什么是tomcat？tomcat是干什么用的？-CSDN博客

TCP/IP 四层体系结构-CSDN博客

Redis新数据类型-Bitmaps-CSDN博客

腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客Synchronized 优化-CSDN博客腾讯-轻量应用服务器centos7中宝塔安装MySQL8.0出现内存不足-CSDN博客

【计算机网络】URL概念及组成-CSDN博客

【计算机网络】TCP socket编程-CSDN博客

枚举类的final修饰-CSDN博客

什么是RabbitMQ-CSDN博客