Vue实例的生命周期详解，从创建到销毁全过程

最新推荐文章于 2024-07-19 12:00:10 发布

Beiyux

最新推荐文章于 2024-07-19 12:00:10 发布

阅读量2.6k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45745641/article/details/122255055

版权

Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段。这些阶段在Vue实例的创建、数据变更、DOM更新和销毁过程中起到关键作用，为开发者提供了在特定时刻介入代码的机会。例如，created阶段适合进行数据初始化，而mounted阶段则适合执行DOM操作。

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

文章目录

前言

前言

Vue的生命周期一直以来都是重中之重，虽然在实际开发中经常用到的就几个，但是你对生命周期的掌握程度决定着你写的程序好不好，并且这一块也一直是面试Vue部分的重要考点。
之前总结了一篇Vue3.0生命周期的介绍 —> Vue3生命周期的那些事
这篇着重介绍Vue2生命周期：
在这里插入图片描述

初识new Vue

关于new Vue 大家应该都知道，new关键字在js中是实例化一个对象。那么 new Vue 都干了啥？
其实，new Vue就是创建了一个Vue实例,Vue实例上是一个类,new Vue实际上是执行了Vue类的构造函数
创建Vue实例：

let vm = new Vue({
   
   el: "#app",
   data: {
   
       name: 'beiyu'
   },
}

那么关于这个实例，从它初始化到销毁，都经历了什么呢？下面一起来看看：

Vue实例从创建到销毁

实例从创建到销毁的过程我们称作生命周期
生命周期的基本概念：
每个Vue实例在被创建时都要经过一系列的初始化过程。
例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了使用者在不同阶段添加自己代码的机会。

1.创建之前—beforeCreate()

Vue实例对象创建之前
el属性和data属性均为空,常用于初始化非响应式变量

beforeCreate() {
   
    console.group("---创建前beforeCreate---")
    console.log('%c%s', 'color: red', 'el:' + this.$el)
    console.log('%c%s', 'color: red', 'data:'