Vue2生命周期的这些细节你都知道吗?

什么是 vue 生命周期?

Vue的生命周期是指Vue实例从创建到销毁的整个过程,这个过程可以分为四个阶段:创建(Creation)、挂载(Mounting)、更新(Updating)和销毁(Destruction)。每个阶段又包含了不同的生命周期钩子函数,通过这些钩子函数,我们可以在Vue实例的不同阶段添加自己的代码,实现特定的功能。

vue生命周期的各个阶段对应哪些钩子函数?

  1. 创建阶段(Creation Hooks)
  • beforeCreate:在实例初始化之后,数据观测(data observer)、事件(event)和watcher 设置之前被调用。

  • created:在实例创建完成后被立即调用。在这一步,实例已完成数据观测、属性和方法的运算,watch和event 回调已设置,但是挂载阶段尚未开始,$el 属性目前不可见。

  1. 挂载阶段(Mounting Hooks)
  • beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。

  • mounted:在 el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

  1. 更新阶段(Updating Hooks)
  • beforeUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。适用于在现有DOM应用更改之前访问它。

  • updated:在由于数据变更导致的虚拟DOM重新渲染和打补丁之后调用。当这个钩子被调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。

  1. 销毁阶段(Destruction Hooks)
  • beforeDestroy:在实例销毁之前调用。实例仍然完全可用,这是你解绑订阅、监听器和取消Vue实例之间的事件通信的好时机。

  • destroyed:在实例销毁之后调用。调用此钩子时,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

这些生命周期钩子为在组件的不同阶段添加自己的代码提供了便利,例如在 created 钩子中进行数据请求,在 mounted 钩子中访问到DOM元素,在 beforeDestroy 钩子中进行清理操作等。理解和合理运用生命周期钩子是高效开发Vue应用的关键。

vue生命周期的各个阶段适合进行哪些操作?

  1. 创建阶段(Creation Hooks)
  • beforeCreate:可以用于加载一些不需要响应式处理的逻辑或数据。

  • created:可以访问this,进行数据初始化,比如从服务端获取数据。

  1. 挂载阶段(Mounting Hooks)
  • beforeMount:可以用于执行一些预操作,比如取消之前的请求或者清理状态。

  • mounted:通常用于发送请求获取数据、绑定非响应式的DOM事件监听器等。

  1. 更新阶段(Updating Hooks)
  • beforeUpdate:可以在这个钩子中访问现有的DOM,比如手动移除已添加的事件监听器。

  • updated:可以执行依赖于DOM更新的操作,比如手动强制更新子组件。

  1. 销毁阶段(Destruction Hooks)
  • beforeDestroy:可以用于清理定时器、取消未完成的请求等。

  • destroyed:可以执行一些最终的清理任务,确保没有残留的资源占用。

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

会触发 beforeCreate, created, beforeMount, mounted 。

DOM 渲染在哪个周期中就已经完成?

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

Vue的父组件和子组件生命周期钩子执行顺序是什么?

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:

  • 加载渲染过程:父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  • 子组件更新过程:父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  • 父组件更新过程:父 beforeUpdate -> 父 updated

  • 销毁过程:父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/601606.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Web3智能物联网:科技连接的未来世界

在当今科技飞速发展的时代,Web3智能物联网正逐渐成为人们关注的焦点。随着区块链技术的不断成熟和普及,以及物联网的普及和应用,Web3智能物联网作为二者的结合,将为未来的数字世界带来革命性的变化。本文将深入探讨Web3智能物联网…

【JavaEE 初阶(三)】多线程代码案例

❣博主主页: 33的博客❣ ▶️文章专栏分类:JavaEE◀️ 🚚我的代码仓库: 33的代码仓库🚚 🫵🫵🫵关注我带你了解更多线程知识 目录 1.前言2.单例模式2.1饿汉方式2.2饿汉方式 3.阻塞队列3.1概念3.2实现 4.定时器4.1概念4.…

Linux常用名命令

Linux是一款免费的操作系统,用户可以通过网络或其他途径免费获得,并可以任意修改源代码,这是其他操作系统做不到的,Ubuntu,Centos。 linux中,一切皆文件。 一些重要的目录 / 根目录,所有文件都放…

2024-05-08 精神分析-对损失和挫败的强烈易感性-分析

摘要: 对损失的强烈的易感性,会在遭受损失或者挫败的时候,表现的极其敏感,这个过程主要是在创业的过程中更加强烈的表现并带来巨大的影响。必须要对其进行彻底的分析,并保持对此行为的长期的警惕。 所谓前事不忘后事之师&#x…

JAVA IO/NIO 知识点总结

一、常见 IO 模型简介 1. 阻塞IO模型 最传统的一种IO模型,即在读写数据过程中会发生阻塞现象。当用户线程发出IO请求之后,内核会去查看数据是否就绪,如果没有就绪就会等待数据就绪,而用户线程就会处于阻塞状态,用户线…

WIFI模块UDP电脑端调试

一,两端都是电脑端 1,电脑本机的IP地址 192.168.137.1 2,新建两个不同的连接,注意端口 二,WIFI 模块和电脑端连接 1,设置模块端目标IP和端口,电脑端只接收数据的话,IP、端口可随…

effective python学习笔记_pythonic思维

优缺点 书的好处是很多新特性提高了可读性代码性等各方面性能,缺点是新特性和py老版本不兼容,老版本可能没有这些新特性,如果用了py早期版本,需要考虑替代方案 查py版本 import sys sys.version sys.version_info 遵循PEP8 …

python turtle

名字动画 #SquareSpiral1.py import turtle t turtle.Pen() turtle.bgcolor("black")my_nameturtle.textinput("输入你的姓名","你的名字?") colors["red","yellow","purple","blue"] for…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑热动态的综合能源系统碳排放流建模与分析》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

浅谈智能电气火灾监控系统的设计及应用

摘要:致电气火灾的原因是多方面的,主要成因包括漏电、绝缘层老化、短路、电火花密集、接地发生故障、电气设备自然、接触不良和电流超负荷等。文章分析电气火灾的成因,并探索电气火灾监控系统的设计方案与注意事项。 关键词:电气…

【数据结构】闲谈A股实时交易的数据结构-队列

今天有点忙,特意早起,要不先写点什么。看到个股的红红绿绿, 突然兴起,要不写篇文章分析下A股交易的简易版数据结构。 在A股实时股票交易系统中,按照个人理解,大致会用队列来完成整个交易。队列(…

WordPress原创插件:当日24小时发布文章标题变红

WordPress原创插件&#xff1a;当日24小时发布文章标题变红 <?php// 添加自定义样式 function title_red_plugin_styles() {$current_time time();$post_time get_the_time(U);$time_difference $current_time - $post_time;if ($time_difference < 86400) {echo&l…

SSH的魅力:为何它成为远程访问的首选

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、SSH简介 2、SSH的历史与发展 3、SSH的主要用…

每日OJ题_贪心算法三③_力扣45. 跳跃游戏 II(dp解法+贪心解法)

目录 力扣45. 跳跃游戏 II 解析代码1_动态规划 解析代码2_贪心 力扣45. 跳跃游戏 II 45. 跳跃游戏 II 难度 中等 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 num…

课程作业管理系统,基于 SpringBoot+Vue+MySQL 开发的前后端分离的课程作业管理系统设计实现

目录 一. 前言 二. 功能模块 2.1. 管理员功能模块 2.2. 教师功能模块 2.3. 学生功能模块 三. 部分代码实现 四. 源码下载 一. 前言 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势…

Java并发编程: Synchronized锁升级

文章目录 一、jdk8 markword实现表二、使用工具来查看锁升级 一、jdk8 markword实现表 new -> 偏向锁 -> 轻量级锁&#xff08;自旋锁、自适应自旋锁&#xff09;-> 重量级锁&#xff1a; 偏向锁和轻量级锁都是用户空间完成的。重量级锁是需要向内核申请的。 synchr…

Jenkins +配置邮件 centos8.5 安装部署 运维系列一

1 jenkins的war包下载地址: Download and deploy 2 xftp 等方式上传到服务器 #安装jdk tar zxvf jdk-11.0.8_linux-x64_bin.tar.gz mv jdk-11.0.8/ /usr/local/jdk vim /etc/profile export JAVA_HOME/usr/local/jdk export PATH$JAVA_HOME/bin:$PATH CLASSPATH.:$JAVA_…

【Qt QML】ComboBox组件

ComboBox 是一个组合的按钮和弹出列表。它提供了一种以最小的屏幕空间呈现选项列表给用户的方式。ComboBox 使用数据模型填充。数据模型通常是一个 JavaScript 数组、一个 ListModel 或一个整数&#xff0c;但也支持其他类型的数据模型。 下面是一个简单的使用方式。 import …

odoo实施之各种导航设计

odoo各种基础能力&#xff1a;活动、讨论 玩转odoo&#xff0c;真有玩的体验 odoo消息提醒能力 odoo 讨论模块 odoo 通过new message触发任务 安装odoo studio进行拖拉拽设计 查阅官方文档&#xff0c;向官方提issue 欧洲和美国&#xff0c;虽然都是英语&#xff0c;但日期格式…

【数据结构与算法】力扣 102. 二叉树的层序遍历

题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a; root [3,9,20,null,null,15,7] 输出&#xff1a; [[3],[9,20],[15,7]]示例 2&#x…
最新文章