VUE文件生命周期超详细介绍

港控/mmm° 2021-07-24 23:33 389阅读 0赞

vue提供了大量的钩子函数，来配合每个Vue实例创建，这就涉及到生命周期这个概念。

vue生命周期牵涉到vue实例对象从创建之初到销毁的过程，vue所有的功能都是围绕其生命周期进行的，不同的周期内调用不同的钩子函数可以实现数据管理和DOM渲染两大重要功能。

一、生命周期官方文档图

![format_png][]

二、钩子函数的详细介绍

在上图，我们可以清楚地看到Vue整个项目周期和他所提供的钩子函数的作用。

--------------------

总共分为8个阶段创建（create）前/后，载入（mount）前/后，更新（update）前/后，销毁（destory）前/后

创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，
    还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
    在mounted阶段，vue实例挂载完成，data.message成功渲染

更新前/后：当data变化时，会触发beforeUpdate和updated方法

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了
    事件监听以及和dom的绑定，但是dom结构依然存在

--------------------

2.1 beforeCreate（创建前）

此阶段为初始化之后，此书的数据观察和事件机制都没形成，不能获得DOM节点。刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳。

**获取不到data里的数据，，method是、computed等设置的方法都不用用，获取不到template中设置的dom。**

2.2 created（创建后）

此阶段vue实例已经创建，仍然不能获取DOM元素。这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数。接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染

**可以获取到data里的数据，可以更改data的数据，获取不到template中设置的dom，可以调用methods里的方法，可以获取computed中的计算属性**

2.3 beforeMount（载入前）

此阶段，仍然得不到具体的DOM元素，但vue挂载的根节点已经创建，相关的render函数首次被调用（虚拟DOM），下面vue对DOM的操作将围绕根元素继续进行。实例已经完成如下配置：编译模板，把data里面的数据和模板生成HTNL，完成了二el、data初始化，此时还没有挂载html页面上。

2.4 mounted（载入后）

此阶段数据和vue单个文件DOM都已经被渲染出来，即模板中的HTML渲染到HTML页面中，一般异步请求都是在这里执行。**mounted只会执行一次**。

2.5 beforeUpdate（更新前）

此阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没有立即更新数据，但DOM中的数据会改变，这是VUE双向数据绑定的作用。

2.6 updated（更新后）

此阶段，DOM会和更改过的内容同步。

2.7 beforeDestory（销毁前）

此阶段一般执行this.$destroy()，一些善后工作，例如清除计时器、清除非指令绑定的事件等。这里还能用this来获取实力

2.8 destroyed（销毁后）

三、

[format_png]: /images/20210724/558f96ae7ba64d1ebdc69bc3ba5b0ffb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Activity生命周期简明、详细介绍

这篇文章对Android的Activity生命周期做了详细、简洁的介绍，记下作为翻阅的资料。转载链接在这儿： [http://blog.csdn.net/andr

迷南。/ 2023年10月16日 21:07/ 0 赞/ 17 阅读

相关 Servlet对象的生命周期详细介绍

监听域对象的生命周期：在Web应用程序的运行期间，Web容器会创建和销毁三个比较重要的对象ServletContext、HttpSession和ServletRequest，这

亦凉/ 2023年10月07日 22:33/ 0 赞/ 5 阅读

相关 Vue生命周期流程图（详细讲解）

最近在看Vue的生命周期，就把各个流程整理一篇内功心法观察各个阶段虚拟dom树和真实dom树的渲染情况，每一个组件或者实例都会经历一个完整的生命周期，大体总共分为三个阶段

拼搏现实的明天。/ 2023年10月06日 14:49/ 0 赞/ 18 阅读

相关 vue 生命周期

<!DOCTYPE html> <html> <head> <title></title> <script type="

刺骨的言语ヽ痛彻心扉/ 2022年05月12日 11:14/ 0 赞/ 49 阅读

相关 vue 生命周期

1/ beforeCreate() 在创建Vue对象之前；用途动画加载 2/ created() 组件（Vue的实例化对象）创建好了，属性也绑定了，但是DOM还没生成；用

港控/mmm°/ 2022年04月22日 14:30/ 0 赞/ 227 阅读

相关 Vue 生命周期

/\ \ @version: V.1.0.0.1 \ @Author: fenggang \ @Date: 2019-06-18 19:38:19 \ @LastEdi

约定不等于承诺〃/ 2021年12月15日 01:49/ 0 赞/ 191 阅读

相关 vue生命周期

总览 ![331769-20180909094731362-16918169.png][] vue的生命周期可简单的从上边这张图了解，红圆角矩形就是生命周期函数相应

ゞ浴缸里的玫瑰/ 2021年12月12日 07:37/ 0 赞/ 462 阅读

相关 Vue教程12(实例生命周期介绍)

通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下 var vm = new Vue({ ...}) 那么这个Vue实例的生命周期是怎

谁借莪１个温暖的怀抱￠/ 2021年12月03日 14:23/ 0 赞/ 215 阅读

相关 vue01——vue的介绍和生命周期

1.vue简介 1.1 概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上

傷城~/ 2021年10月18日 07:14/ 0 赞/ 245 阅读

相关 VUE文件生命周期超详细介绍

vue提供了大量的钩子函数，来配合每个Vue实例创建，这就涉及到生命周期这个概念。 vue生命周期牵涉到vue实例对象从创建之初到销毁的过程，vue所有的功能都是围绕其生命周

港控/mmm°/ 2021年07月24日 23:33/ 0 赞/ 390 阅读