Vue源码系列讲解——生命周期篇【一】(综述)

1. 前言

Vue中,每个Vue实例从被创建出来到最终被销毁都会经历一个过程,就像人一样,从出生到死亡。在这一过程里会发生许许多多的事,例如设置数据监听,编译模板,组件挂载等。在Vue中,把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期,同时,在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数,以方便用户在不同的生命周期阶段做一些额外的事情。那么,接下来的几篇文章我们就从源码角度深入剖析一下一个Vue实例在从生到死的生命周期里到底都经历了些什么,每个阶段都做了哪些事情。

2. 生命周期流程图

下图是Vue官网给出的Vue实例的生命周期流程图,如下:

从图中我们可以看到,Vue实例的生命周期大致可分为4个阶段:

  • 初始化阶段:为Vue实例上初始化一些属性,事件以及响应式数据;
  • 模板编译阶段:将模板编译成渲染函数;
  • 挂载阶段:将实例挂载到指定的DOM上,即将模板渲染到真实DOM中;
  • 销毁阶段:将实例自身从父组件中删除,并取消依赖追踪及事件监听器;

3. 总结

本篇文章是生命周期篇的开篇综述,借用Vue官网的生命周期流程图介绍了一个Vue实例的生命周期大致可分为四个阶段,分别是初始化阶段、模板编译阶段、挂载阶段、销毁阶段。接下来的几篇文章我们就从这个流程图为基础,自上到下,从每个阶段入手,深入分析在每个阶段里都干了些什么。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国开电大计算机科学与技术网络技术与应用试题及答案,分享几个实用搜题和学习工具 #媒体#其他#知识分享

这些软件以其强大的搜索引擎和智能化的算法,为广大大学生提供了便捷、高效的解题方式。下面,让我们一起来了解几款备受大学生欢迎的搜题软件吧! 1.三羊搜题 这个是公众号 支持文字和语音查题!!! 学习通,知到,mooc等等平台的网课题目答案都…

【HarmonyOS应用开发】云开发(十九)

HarmonyOS云开发是DevEco Studio新推出的功能,可以让您在一个项目工程中,使用一种语言完成端侧和云侧功能的开发。 基于AppGallery Connect Serverless构建的云侧能力,让您无需构建和管理云端资源,随需使用,大大提高构…

qt for python创建UI界面

现在很多库都有用到python,又想使用QT creater创作界面,来使用。 1.使用的版本 使用虚拟机安装Ubuntu22.04,Ubuntu使用命令行安装qt,默认安装的是QT5,不用来回调了,就用系统默认的吧,不然安装工具都要费不少事情。pyt…

小程序--模板语法

一、插值{{}}语法 1、内容绑定 <view>{{iptValue}}</view> 2、属性绑定 <switch checked"{{true}}" /> Page({data: {iptValue: 123} }) 二、简易双向数据绑定 model:value&#xff1a;支持双向数据绑定 注&#xff1a;仅input和textarea支持&a…

如何创建WordPress付款表单(简单方法)

您是否正在寻找一种简单的方法来创建付款功能WordPress表单&#xff1f; 小企业主通常需要创建一种简单的方法来在其网站上接受付款&#xff0c;而无需设置复杂的购物车。简单的付款表格使您可以轻松接受自定义付款金额、设置定期付款并收集自定义详细信息。 在本文中&#x…

【小呆的力学笔记】弹塑性力学的初步认知四:简单应力状态下的应力应变关系

文章目录 2. 简单应力状态下的应力应变关系2.1 简单拉伸的应力应变关系2.2 真实应力应变关系2.3 应力-应变关系简化模型 2. 简单应力状态下的应力应变关系 我们在高中就学过&#xff0c;弹簧拉伸力和变形量成比例&#xff0c;对于一般的金属材料&#xff0c;在一定载荷以内这种…

银河麒麟系列产品全新介绍——麒麟天御安全域管平台

麒麟天御安全域管平台是麒麟软件自主研发的新一代终端系统域管理平台,是专门针对银河麒麟操作系统环境下大规模的域用户和终端管理需求而设计。该平台聚焦用户身份验证、权限、访问控制、集中化管理、单点登录、策略等多个领域,提供组织管理、用户管理、终端管理、任务管理、软…

D70XX——用于检测 CPU 系统或其它逻辑系 统中的通电和瞬时断电时的电压 后,准确地重置系统。,耗电小

D70XX 电压检测及复位监控电路 D70XX电路的主要功能是在系统上电和掉电瞬间能精确检测并 复位CPU系统和其它逻辑系统。 D70XX采用TO-92、SOT-89-3L及SOT-23-3L的封装形式。 主要特点&#xff1a; ● 耗电小&#xff1a; ICCL300A&#xff08;典型&#xff09; ICCH30A &…

基于shp数据制作3DTiles建筑白膜

经纬管网建模系统MagicPipe3D&#xff0c;本地离线参数化构建地下管网、建筑三维模型&#xff0c;输出标准3DTiles服务、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析。欢迎下载试用&#xff1a;http://www.magic3d.…

【Git】:Git的基本操作

Git的基本操作 一.修改文件二.版本回退三.撤销修改四.删除文件 一.修改文件 git管理的并不是文件而是修改&#xff0c;objects里的对象存储的其实是修改的内容。 接下来对ReadMe文件进行修改 1.git status查看状态 该命令用来查看从上次提交后到现在是否有对内容进行修改。它告…

力扣日记2.20-【回溯算法篇】491. 非递减子序列

力扣日记&#xff1a;【回溯算法篇】491. 非递减子序列 日期&#xff1a;2023.2.20 参考&#xff1a;代码随想录、力扣 ps&#xff1a;放了个寒假&#xff0c;日记又搁置了三星期……&#xff08;下跪忏悔&#xff09; 491. 非递减子序列 题目描述 难度&#xff1a;中等 给你一…

【Docker】Docker存储卷

文章目录 一、什么是存储卷二、为什么需要存储卷三、存储卷分类四、管理卷Volume创建卷方式一&#xff1a;Volume 命令操作方式二&#xff1a;-v 或者--mount 指定方式三&#xff1a;Dockerfile 匿名卷 操作案例Docker 命令创建管理卷Docker -v 创建管理卷Docker mount 创建管理…