<center>Vue的生命周期</center>

今天药忘吃喽~ 2024-04-20 10:19 0阅读 0赞

**Vue的生命周期**

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

**beforeCreate**（创建前） 在数据观测和初始化事件还未开始  
**created**（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

**beforeMount**（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。  
**mounted**（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。  
**beforeUpdate**（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。  
**updated**（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。  
**beforeDestroy**（销毁前） 在实例销毁之前调用。实例仍然完全可用。  
**destroyed**（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

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

**1.什么是vue生命周期？**

答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

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

**2.vue生命周期的作用是什么？**

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

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

**3.vue生命周期总共有几个阶段？**

答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

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

**4.第一次页面加载会触发哪几个钩子？**

答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

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

**5.DOM 渲染在 哪个周期中就已经完成？**

答：DOM 渲染在 mounted 中就已经完成了。

发表评论取消回复

表情：

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

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

相关阅读

相关 <center>Vue中实例对象的生命周期详解及细节应用center>

*什么是生命周期：** 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ --------------------...

清疚/ 2024年04月17日 15:12/ 0 赞/ 6 阅读

相关 Bean的生命周期和BeanDefinition的生命周期

一、Bean的生命周期： ![format_png][] ![format_png 1][] 二、BeanDefinition的生命周期 [format_pn

Bertha 。/ 2022年11月25日 04:16/ 0 赞/ 196 阅读

相关生命周期

https://www.jianshu.com/p/b331d0e4b398 http://projects.wojtekmaj.pl/react-lifecycle-met

r囧r小猫/ 2022年11月25日 04:06/ 0 赞/ 191 阅读

相关 java session 生命周期_Session的生命周期

以前在学习的时候没怎么注意，今天又回过头来仔细研究研究了一下Session的生命周期。 Session存储在服务器端，一般为了防止在服务器的内存中(为了高速存取)，Sessi

野性酷女/ 2022年11月06日 09:50/ 0 赞/ 197 阅读

相关 uni-app 应用生命周期、页面生命周期、组件生命周期的区别

页面加载过程：加载=》显示=》加载完成=》页面隐藏=》页面卸载触发页面生命周期： onLoad:监听页面加载 =》 onShow:监听页面显示 =》 onReady:监听

亦凉/ 2022年10月18日 11:23/ 0 赞/ 272 阅读

相关生命周期

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

我就是我/ 2022年06月02日 11:16/ 0 赞/ 254 阅读

相关 React（6）生命周期（组件生命周期、state生命周期）

12、生命周期参考链接： [React组件生命周期小结][React] 两个生命周期，分别是组件的生命周期，和状态变更的声明周期组件结构：父组件套用子组件

桃扇骨/ 2022年05月31日 08:08/ 0 赞/ 389 阅读

相关 jvm的生命周期和java类的生命周期

1.jvm的生命周期一个运行时的的java虚拟机实例的天职就是运行一个java程序。 1.1.JVM实例的诞生当一个程序启动，伴随的就是一个jvm

「爱情、让人受尽委屈。」/ 2022年05月22日 03:14/ 0 赞/ 223 阅读

相关微信小程序生命周期、页面生命周期、组件生命周期

1. 生命周期 App（全局）位置：项目根目录app.js文件 App({ onLaunch (options) { //

浅浅的花香味﹌/ 2021年10月29日 07:36/ 0 赞/ 405 阅读

相关 View生命周期与Activity生命周期的关系

一、View相关的生命周期 1、`Creation`（创建） Constructors（构造函数） onFinishInflate()：该方法当View

青旅半醒/ 2021年06月26日 16:06/ 0 赞/ 533 阅读