vue生命周期的详解

vue生命周期：

1. 创建阶段：beforeCreate（）；created（）

2. 挂载阶段：beforeMount（）；mounted（）

3. 更新阶段：beforeUpdate（）；updated（）

4. 销毁阶段：beforeDestroy（）；destroyed（）

这是vue生命周期阶段，但我们可知道当中的过程是怎样的，其实官网的生命周期图示以及解释的非常清楚了（下图），如果您能看懂官方的图示，那就没必要再继续往下阅读了。如果你还有疑惑，我会再后面按照官方生命周期图示，详细解释每个阶段的过程。

来源 vue官网生命周期图示

vue生命周期详解：

1. 创建阶段：

新建 vue 实例 new vue（）
读取配置项，加载生命周期方法
调用 beforeCreate（）
设置 data、methods、computed… 等配置项
调用created（）

2. 挂载阶段：

判断是否拥有 template 配置项
- 有：传入 render 函数，编译template
- 没有：把 el 对应的 outerHTML 当成 template 传入 render 函数编译
调用 beforeMount（）
使用编译后结果替换 el 作用的 dom
调用 mount（）

3. 更新阶段：

只有数据发生变化，并且 dom 使用了该数据，dom 才会更新，此时才执行更新的生命周期方法，更新前和更新后不是数据更新的状态，而是 dom 更新前与更新后。

数据发生变化
调用 beforeUpdate（）
重新渲染 dom
调用 updated（）

4. 销毁阶段：

执行 vm.$destroy（） 销毁实例
调用 beforeDestroy（）
实例移除 data、methods、computed…
调用 destroyed（）

至此整个vue的生命周期完成；
希望以上的内容能让你对vue生命周期有更深的理解

vue生命周期的详解相关推荐

vue 生命周期的详解
一.vue生命周期的解析 > 1>什么是vue生命周期每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...
超详细vue生命周期解析(详解)
vue是每一个前端开发人员都绕不过的一个技术,在国内的市场占有量也是非常的大,我们大部分人用着vue, 却不知道他内部其实经历了一些什么.每个生命周期又是什么时候开始执行的.我们今天来详细的看一看首 ...
vue 生命周期（详解）
前言首先我们要搞明白生命周期到底是什么? 顾名思义,生命周期就是我们从开始创建vue实例到销毁的一个过程,这一过程就叫做生命周期,这就好比我们的人生一样从出生到结束的一个过程. 切记,生命周期函数不 ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
Android Lifecycle 生命周期组件详解
转载请标明出处:https://blog.csdn.net/zhaoyanjun6/article/details/99695779 本文出自[赵彦军的博客] 一.Lifecycle简介为什么要引进 ...
Vue的生命周期的详解
Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录. Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的 ...
Asp.Net生命周期的详解
一．Asp.Net页面生命周期的概念当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 TTP页面处理程 ...
android 屏幕横竖屏切换时生命周期运行详解，创建横屏layout，has no declaration in the base
横屏代码 1.配置文件设置 android:screenOrientation="landscape" 2.java代码设置 setRequestedOrientation(Act ...
Asp.Net WebForm生命周期的详解
一．http://Asp.Net页面生命周期的概念当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 T ...