Vue的生命周期过程详解

Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

实例生命周期钩子

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

beforeCreate、created、
beforeMount、mounted、
beforeUpdate、updated、
beforeDestroy、destroyed

Vue的生命周期图示（官方中文文档）

（以下图片转自coderwhy老师，帮助理解 Vue生命周期）

Vue的生命周期过程详解（主要以钩子函数为主线）

1、beforeCreate：
实例组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行 beforeCreate 钩子函数，数据和 dom 都未初始化（取不到），一般不做任何操作。

2、created：
挂载数据，绑定事件已完成，然后执行created函数，这个时候已经可以操作数据, 而且不会触发 updated 函数，一般在这里做初始数据的获取（相比在 beforeMount 获取数据页面渲染速度较快）。

3、beforeMount：
执行这个函数前，虚拟dom 创建完成，真实 dom未完成挂载。这里更改数据不会触发 updated ，在这里也可以做初始数据的获取。

4、mounted：
执行 mounted 钩子函数前，数据、真实dom都已经处理好了,事件也挂载好了，一般在这里初始化一些操作真实 dom 的方法。

5、beforeUpdate：
当组件或实例的数据更改，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。可以监听到 data 变化，但view层的数据还没有变化。一般不做任何操作。

6、updated：
view层的数据重新渲染完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7、beforeDestroy：
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、数据和事件的监听等。

8、destroyed：
组件的数据绑定、事件监听清除后只剩下dom空壳，这个时候，执行 destroyed 彻底销毁实例，如果在 beforeDestroy 没有做善后工作，在这里做善后工作也可以。

注：掌握各个钩子函数执行时的环境，并在项目开发中正确使用显得尤为重要，能避免一些基础的bug。

参考文章：
vue 生命周期详解
Vue.js 中文文档
Vue生命周期

Vue的生命周期过程详解相关推荐

Vue的生命周期的详解
Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录. Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的 ...
Android Lifecycle 生命周期组件详解
转载请标明出处:https://blog.csdn.net/zhaoyanjun6/article/details/99695779 本文出自[赵彦军的博客] 一.Lifecycle简介为什么要引进 ...
vue生命周期的详解
vue生命周期: 1. 创建阶段:beforeCreate():created() 2. 挂载阶段:beforeMount():mounted() 3. 更新阶段:beforeUpdate():upd ...
vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
vue 生命周期（详解）
前言首先我们要搞明白生命周期到底是什么? 顾名思义,生命周期就是我们从开始创建vue实例到销毁的一个过程,这一过程就叫做生命周期,这就好比我们的人生一样从出生到结束的一个过程. 切记,生命周期函数不 ...
超详细vue生命周期解析(详解)
vue是每一个前端开发人员都绕不过的一个技术,在国内的市场占有量也是非常的大,我们大部分人用着vue, 却不知道他内部其实经历了一些什么.每个生命周期又是什么时候开始执行的.我们今天来详细的看一看首 ...
Asp.Net生命周期的详解
一．Asp.Net页面生命周期的概念当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 TTP页面处理程 ...
Asp.Net WebForm生命周期的详解
一．http://Asp.Net页面生命周期的概念当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 T ...
spring 生命周期最详解
目的在大三开始学习spring时,老师就说spring bean周期非常重要,当时也有仔细看,但是说实话搞不大懂,后面工作面试也问过,还是有点模糊,就是没有掌握好,进行深入理解,这次"老大 ...

Vue的生命周期过程详解

Vue的生命周期过程详解相关推荐

最新文章

热门文章