Vue生命周期共有几个阶段

Vue生命周期共有8个阶段,分别为:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

Vue 生命周期共有 8 个阶段,分别为:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

Vue生命周期共有几个阶段

Vue 生命周期的八个阶段

1、beforeCreate:组件实例刚被创建,组件属性计算之前。

2、created:组件实例刚被创建,属性已绑定,但 Dom 还未生成。

3、beforeMount:模板编译/挂载之前。在挂载开始之前被调用,相关的 render 函数首次被调用,实例已完成以下的配置: 编译模板,把 data 里面的数据和模板生成 html,此时注意还没有挂载到 Html 页面上。

4、mounted:模板编译/挂载之后。在 el 被新创建的 vm.el 替换,并挂载到实例上去之后被调用,实例已完成以下的配置:用上面编译好的的 html 内容替换 l 属性指向的 Dom 对象。完成模板中的 html 渲染到 html 页面中。此过程进行 ajax 交互。

5、beforeUpdate:组件更新之前。在数据更新之前调用,发生在虚拟 Dom 重新渲染打补丁之前,可以在钩子函数中进一步的更改状态,不会出大附加的重渲染过程。

6、updated:组件更新之后。在由于数据更改导致的虚拟 Dom 重新渲染和打补丁之后调用。调用是,组件 Dom 已经更新,所以可以执行依赖于 Dom 的操作,然而在大多数的情况下,应该避免在此期间更改状态,因为这可能会导致更新无线循环,该钩子函数在服务器端渲染期间不被调用。

7、beforeDestroy:组件销毁前调用。在示例销毁之前调用,实例仍然完全可用。

8、destroyed:组件销毁后调用。 在实例销毁之后调用。调用后,所有的时间监听会被移除,所有的子实例也会被销毁,该钩子函数在服务器端渲染器件不被调用。

其他扩展

什么是生命周期

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

Vue 生命周期的作用是什么

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

第一次页面加载会触发那几个钩子

会触发 beforeCreated,created,beforeMount,mounted。

Dom 渲染在哪个周期完成

Dom 渲染在 mounted 中就已经完成了。

(0)
时间不会说谎  的头像时间不会说谎  

相关推荐

  • 哪些专业软件对显卡要求高,必备显卡配置推荐

    作为一名从事专业软件行业的工作者,我们都知道,专业软件的要求非常高,不仅需要高配置的电脑,还需要一张高性能的显卡。那么,哪些专业软件对显卡要求高呢?本篇文章将为大家详细介绍。一、CAD软件CAD软件是一种专业的计算机辅助设计软件,广泛应

    2023年10月6日
  • 电阻屏和电容屏有什么区别,如何选择适合自己的屏幕

    本文目录一览电阻屏和电容屏的区别如何选择适合自己的屏幕?在选择合适的屏幕之前,我们需要先了解一下电阻屏和电容屏的区别。电阻屏是一种通过触摸面板上的压力来感应触摸的屏幕,而电容屏则是通过感应人体电荷来感应触摸的屏幕。电阻屏和电容屏的区别

    2023年10月26日
  • 华为mate30绝版了值不值得买,这款手机还有哪些优势和劣势

    华为mate30绝版了值不值得买(这款手机还有哪些优势和劣势)华为mate30系列手机于2019年9月发布,是华为最新的旗舰手机之一。然而,近日有消息称华为mate30已经绝版,那么华为mate30绝版了值不值得买呢?本文将为大家分析华为

    2024年3月14日
  • 条码扫描器安装方法,该如何正确安装和设置

    条码扫描器是现代商业中必不可少的一种设备,它可以快速准确地读取条形码,提高工作效率,减少人工出错率。但是,很多人在安装和设置条码扫描器时遇到了困难。本文将为你介绍正确的条码扫描器安装方法和设置步骤。一、安装1.检查电脑接口首先,你需要

    2024年2月16日
  • 华为畅享九S,有哪些值得购买的亮点和注意事项

    本文目录一览华为畅享九S(有哪些值得购买的亮点和注意事项)华为畅享九S的亮点华为畅享九S的注意事项总结华为畅享九S(有哪些值得购买的亮点和注意事项)华为畅享九S是华为公司推出的一款性价比较高的手机,它的外观设计简洁大方,性能表现也十

    2023年10月7日
  • 联想笔记本充电没反应,怎么解决

    本文目录一览检查电源和充电器检查笔记本电脑的电池检查笔记本电脑的充电口总结最近,我遇到了一个非常棘手的问题,我的联想笔记本充电器插上去后,电脑却没有任何反应。这让我非常困扰,因为我的笔记本电脑是我的工作和娱乐的主要工具。我开始寻找解决

    2024年3月28日
  • 行车记录仪电子狗是什么意思,详解车载电子设备

    随着科技的不断发展,车载电子设备已经成为了现代汽车中不可或缺的一部分。在众多的车载电子设备中,行车记录仪电子狗是其中一种非常受欢迎的设备。那么,行车记录仪电子狗是什么意思呢?在本文中,我们将详细介绍行车记录仪电子狗的定义、功能、使用方法以及

    2024年3月23日
  • 联想z460笔记本电脑怎么样,值得购买吗

    本文目录一览联想z460笔记本电脑怎么样(值得购买吗)外观设计性能表现操作体验总结联想z460笔记本电脑怎么样(值得购买吗)如果你正在寻找一款性能出色的笔记本电脑,那么联想z460肯定是一个不错的选择。这款笔记本电脑采用了英特尔第

    2023年10月30日
  • 漫步者e1100mkii,有哪些特点和优势

    漫步者e1100mkii是一款备受好评的蓝牙音箱,它以其出色的音质和便携式设计而闻名。如果你正在寻找一款高质量的蓝牙音箱,那么漫步者e1100mkii绝对是一个值得考虑的选择。在本文中,我们将深入探讨漫步者e1100mkii的特点和优势,以

    2023年11月6日
  • 买什么手机像素最好,如何选择最适合自己的手机像素

    随着科技的不断发展,手机已经成为了人们生活中必不可少的一部分。而在选择一款手机时,像素也成为了一个很重要的因素。那么,买什么手机像素最好呢?在本文中,我们将为您详细介绍如何选择最适合自己的手机像素。一、什么是手机像素首先,我们需要了解什

    2023年11月11日
  • ie7以上浏览器,有哪些常用浏览器支持?

    本文目录一览IE7以上浏览器(有哪些常用浏览器支持?)IE7以上浏览器(有哪些常用浏览器支持?)如果您是一位网站开发者或者是使用IE7以上浏览器的用户,那么您一定会关心哪些浏览器支持IE7以上版本。在本文中,我们将会介绍几种常用的浏览器,

    2023年11月1日
  • 电冰箱品牌排行榜,哪些品牌值得购买?

    本文目录一览1.海尔(Haier)2.美的(Midea)3.西门子(Siemens)4.松下(Panasonic)5.格力(Gree)总结电冰箱是我们家庭中必不可少的电器之一,不仅可以保鲜食物,还可以制作冰块。但是市面上有很多品牌

    2023年10月23日
  • 苹果11刷机报错4013,如何解决

    苹果11是苹果公司最新推出的一款智能手机,它拥有更快的处理器、更大的屏幕和更强大的摄像头。但是,有时候当我们尝试刷机时,会遇到一些问题,其中最常见的问题就是4013错误。这个错误可能会让用户感到困惑和沮丧,因为它会导致设备无法正常工作。在本

    2023年11月3日
  • 十大公认音质好的CD机,你知道哪些?

    CD机是一种非常重要的音频设备,它可以让我们听到高质量的音乐。但是,在市场上有很多种不同的CD机,如何选择一款音质好的CD机呢?在这篇文章中,我将会介绍十款公认音质好的CD机,帮助你选择最适合自己的一款。1.MarantzSA8005

    2024年2月26日
  • 小米14Ultra怎么开启5g网络

    现如今,随着5G技术的迅猛发展,越来越多的人开始享受到高速、稳定的5G网络带来的便利和快捷。而作为一款旗舰级手机,小米14Ultra也具备了5G网络的支持。那么,你是否好奇如何在小米14Ultra上开启5G网络呢?下面就让我们一起来探索吧!

    2024年2月21日

发表回复

登录后才能评论