Vue实例生命周期详解

代码溯影客
• 阅读 2106
vue的生命周期的含义实质上就是一个实例从创建到销毁的一系列可以进行的操作

初始化阶段

Vue实例生命周期详解

var vm = new Vue({
  // 选项
})

其中VM是(ViewModel)的缩写,经常用来表示Vue实例,而new Vue()表示创建了一个Vue的实例

Vue实例生命周期详解

实例创建后,会初始化一个空的Vue实例对象,但是这个时候,这个实例对象上只有默认的一些生命周期函数和默认的事件,其他都未创建
然后出现第一个生命周期钩子

beforeCreate

这个钩子执行时,Vue实例的data和methods中的数据还没有初始化,所以可以认为beforeCreate是实例数据绑定之前的钩子

Vue实例生命周期详解

初始化空的Vue实例后,紧接着data和methods也被初始化,产生了第二个生命周期钩子

create

create是data和methods数据绑定后产生的钩子,所以如果调用methods和data中的数据,最早只能在create中操作

这两个生命周期完毕后,Vue实例就初始化完毕了

挂载阶段

Vue实例生命周期详解

Vue实例初始化完毕后,Vue开始编辑模板,把Vue代码中使用的指令进行执行,最终在内存中生成一个编译好的模板字符串,然后把这个模板字符串,渲染为内存中的DOM,此时,内存中以及存在了渲染好的模板,但是还没有真正的挂载到页面中,所以页面仍旧是旧的页面

执行指令 > 生成模板字符串 > 渲染为DOM > 未挂载

beforeMount

这个生命周期钩子执行的那一刻就是内存中已经存在了渲染好的DMO但是认为挂载到页面去,我们可以在页面还没挂载前,先初始化页面要显示的数据

Vue实例生命周期详解

执行后,已经把编译后模板挂载到 el 节点上去了,产生了下一个生命周期

mount

这个钩子执行时,我们可以通过某些插件操作页面的DOM节点,要做mount中进行


运行阶段

Vue实例生命周期详解

这个周期是实例在 生命运行 中的状态,中有两个生命周期钩子,在中间会用新的数据渲染出新的内存DOM树,当新的DOM树被更新后,会把新的DOM树重新加到页面中
数据从Model层 > View(视图)

*beforeUpdata

当执行这个状态时,页面显示的仍然是旧的数据,此时数据是新的,页面显示数据未与最新数据保持一致

Updata

当执行这个状态时,页面显示数据和最新的数据已经保持同步


销毁阶段

Vue实例生命周期详解

此时有两个生命周期钩子可使用

beforeDestroy

执行这个钩子函数时,Vue实例已经从运行阶段到了销毁阶段,但实例上所有的data和所有的methods,以及过滤器,指令,都属于可用状态,还没有真正执行销毁过程

destroyed

当执行这个钩子函数时,组件以及完全被销毁,此时组件中的所有,methods,data,监听器,过滤器,都无法使用

至此,整个Vue实例完成它的工作,被清除出内存
点赞
收藏
评论区
推荐文章
凝雪探世界 凝雪探世界
4年前
vue-生命周期
vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁创建前:beforeCreate,创建后:created挂载前:beforeMount,挂载后:mounted更新前:beforeUpdate,更新后:updated销毁前:beforeDestroy,销毁后:destroye
小万哥 小万哥
1年前
C++编程必备:对象生命周期管理的最佳实践
在C中,对象的生命周期是指对象存在的时间段,从对象创建到对象销毁的整个过程。正确地管理对象的生命周期是编写高效、可靠C代码的关键之一。
Alex799 Alex799
4年前
Vue面试题
1、Vue的生命周期?beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(创建、挂载、更新、卸载)挂载中可以操作DOM,创建中不能操作DOM;常用挂载或者创建生命周期就行了2、methods和computed的区别?
Easter79 Easter79
3年前
vue 生命周期的理解(created && mouted的区别)
生命周期先上图(笑skr个人~~)!(https://oscimg.oschina.net/oscnet/6d899c3576884ee9db73c0263ac9f4027e0.png)什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我
CuterCorley CuterCorley
4年前
uni-app入门教程(8)在uni-app中使用Vue
前言本文主要的主要内容是在uniapp中Vue的用法,具体如下:Vue支持响应式数据操作,可以实现数据和事件的绑定,同时支持this传递;uniapp在Vue实例生命周期的基础上增加了应用生命周期和页面生命周期;实现全局变量的3种方式,即公用模块、挂载Vue.prototype和globalData;Class和Style的动态绑定,包括对象
Tankard825 Tankard825
4年前
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。5.1.Vue实例初始
Easter79 Easter79
3年前
Spring中管理Bean依赖注入之后和Bean销毁之前的行为
    对于Singleton作用域的Bean,Spring容器将会跟踪它们的生命周期,容器知道何时实例化结束、何时销毁。Spring可以管理Bean在实例化结束之后和Bean销毁之前的行为。Bean依赖关系注入之后的行为:    Spring提供了两种方式在Bean全部属性设置成功后执行特定的行为:在Spring配置文件
Stella981 Stella981
3年前
Spring 源码分析之 bean 实例化原理
本次主要想写springbean的实例化相关的内容。创建springbean实例是springbean生命周期的第一阶段。bean的生命周期主要有如下几个步骤:<fontcolor'red'创建bean的实例</font给实例化出来的bean填充属性初始化bea通过IOC容器使用bean
Stella981 Stella981
3年前
Spring Bean 范围
Scope分类scope范围说明singleton(默认)每个SpringIoC容器定义单个bean实例prototype任意数量的对象实例request每个HTTP请求都有自己的Bean实例sessionHTTP会话的生命周期将共用同一个Bean实例globalSession全局HTTP会话的生命周期
Stella981 Stella981
3年前
Jvm类的加载机制
1.概述虚拟机加载Class文件(二进制字节流)到内存,并对数据进行校验、转换解析和初始化,最终形成可被虚拟机直接使用的Java类型,这一系列过程就是类的加载机制。2.类的加载时机类从被虚拟机加载到内存开始,直到卸载出内存为止,整个生命周期包括:加载——验证——准备——解析——初始化——使用——卸载这7个阶段。其中验
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(