25 VueComponent 的生命周期

news2024/10/7 2:28:11

前言 

这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 

主要记录的是 vue 的相关实现机制 

呵呵 理解本文需要 vue 的使用基础, js 的使用基础 

 测试用例

测试用例如下, 一个简单的 按钮事件的触发  

问题的调试

这里以一个组件 来看一下 整个过程

beforeCreate – create - beforeMount - mounted - beforeUpdate - updated - beforeDestroy - destroyed

在根据 vnode 实例化 VueComponent, 创建页面 dom 元素的时候, 会创建给定的 VueComponent, 这里我们可以看到很多东西 

这里我们仅仅关心在 init 的时候调用了 beforeCreate 回调 

同样是在初始化的时候, 第二个回调是 create 

这两个阶段的流程大致如下

initLifecycle 主要是初始化父子组件关系, 初始化root组件

initEvents 主要是继承父组件的相关事件监听 

initRender 主要是初始化 vm._c, vm.$createElement, vm.$slots

initInjections 主要是注册组件中定义的 injections 相关属性 

initState 主要是初始化 props, methods, data, computed, watch, 字段封装代理什么的, 在这里面 

接着是 beforeMount, mounted 相关 

是在 init 之后主动触发的

先调用的 beforeMount 回调 

接着 render 生成整个 vnode 树

接着 update 递归创建子组件, dom 元素 等等 

接着 调用 mounted 回调 

这里调用是 beforeUpdate 的地方, 注册是在 初始化 VueComponent 的地方注册的 

调用的地方是在 Watcher 处理开头, 在 Watcher.run 之前 

这里调用是 updated 的地方, 调用的地方是在 Watcher 处理末尾, 在 Watcher.run 之后  

其他的生命周期函数 beforeDestroy, destroyed 不再赘述 

这部分内容可以 结合官方文档 看一下

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux——网络套接字3|Tcp客户端编写②

根据我们前面写的服务器,server端需要绑定,而client要不要bind呢? 不需要,因为客户端一旦和一个非常具体的端口号绑定,可能会导致端口号绑定多个客户端,因此可能会出现某个客户端无法启动。而服务器需要明确的端口号,因为服务器面对的是众多的客户端,服务器端口号一旦被…

c++ 11标准模板(STL) std::map(五)

定义于头文件<map> template< class Key, class T, class Compare std::less<Key>, class Allocator std::allocator<std::pair<const Key, T> > > class map;(1)namespace pmr { template <class Key, class T, clas…

ros学习

1创建工作空间 catkin_init_workspace 将文件夹初始化成ros文件 编译工作空间catkin_make vi ~/.bashrc 加入环境变量bashrc一下在任何终端都生效 catkin_create_pkg learning_communication通讯机制 std_msgs数据结构 rospy roscpp catkin_create_pkg mbot_description ur…

雅思备考经验!阅读 8.5,听力 8.5!

成绩单 先上热乎乎的成绩单截图&#xff08;2023.5.19 考试&#xff09;&#xff0c;偏科选手出来挨打&#xff01;好在小分都达到了要求~ 英语基础 大概是两三年前考过托福和 GRE&#xff0c;成绩过期了没办法&#xff0c;只能重考&#xff0c;这次试试雅思。 雅思和托福的…

14-Vue技术栈之Vue3快速上手

目录 1.Vue3简介2. Vue3带来了什么2.1 性能的提升2.2 源码的升级2.3 拥抱TypeScript2.4 新的特性 1、海贼王&#xff0c;我当定了&#xff01;——路飞 2、人&#xff0c;最重要的是“心”啊&#xff01;——山治 3、如果放弃&#xff0c;我将终身遗憾。——路飞 4、人的梦想是…

【软考系统规划与管理师笔记】第3篇 信息技术知识2

目录 1 计算机网络 1.1网络技术标准、协议与应用 Internet技术及应用 2 标识技术 域名系统和统一资源定位器 3 网络分类、组网和接入技术 3.1 网络分类 3.2 网络交换技术 3.3 网络接入技术 3.4 无线网络技术 4 网络服务器和网络存储技术 4.1 服务器 4.2 网络存储技…

24 memcmp 的调试

前言 同样是一个 很常用的 glibc 库函数 不管是 用户业务代码 还是 很多类库的代码, 基本上都会用到 内存数据的比较 不过 我们这里是从 具体的实现 来看一下 它的实现 主要是使用 汇编 来进行实现的, 因此 理解需要一定的基础 测试用例 就是简单的使用了一下 memcpy,…

【Python】正则表达式应用

知识目录 一、写在前面✨二、姓名检查三、解析电影排行榜四、总结撒花&#x1f60a; 一、写在前面✨ 大家好&#xff01;我是初心&#xff0c;希望我们一路走来能坚守初心&#xff01; 今天跟大家分享的文章是 正则表达式的应用 &#xff0c;希望能帮助到大家&#xff01;本篇…

Makefile基础教程(路径搜索)

文章目录 前言一、常用的源码管理方式二、VPATH和vpath1.VPATH2.vpath3.VPATH和vpath优缺点对比 三、VPATH和vpath同时出现make会怎么处理四、vpath指定多个文件夹总结 前言 在前面的文章中我们的文件全部都是放在同一个目录下面的&#xff0c;那么在实际的工程开发中会这样做…

阿里云服务器备份到本地 镜像 快照 OSS存储 (保姆级图文)

目录 省钱措施1. 创建自定义镜像2. 导出镜像创建/选择OSS对象存储空间 3. 下载到本地总结 欢迎关注 『发现你走远了』 博客&#xff0c;持续更新中 欢迎关注 『发现你走远了』 博客&#xff0c;持续更新中 阿里云的这个官方步骤要收几毛钱的费用 因为他要求必须先快照镜像&…

通过一个平面几何题来梳理解题模型

昨天一位邻居在群里问了一道题目&#xff1a; 已知&#xff1a;如图&#xff0c;OA平分∠BAC&#xff0c;∠1∠2&#xff0e;求证&#xff1a;△ABC是等腰三角形&#xff0e; 先不讲如何来解答这个题目&#xff0c;重点是我们来分析这道题到底在考察什么&#xff0c;如果条件换…

使用ScreenToGif录制GIF动态图

文章目录 1.下载ScreenToGif工具2. 下载后双击下面的.msi文件进行安装3. 在编辑器中可以对所有帧添加文字描述 1.下载ScreenToGif工具 链接&#xff1a;https://pan.baidu.com/s/1rvFZSbMdNus90hbzxsJlGA 提取码&#xff1a;gyqe2. 下载后双击下面的.msi文件进行安装 按照默认…

springboot高校专业招生信息管理系统jsp001

对于学校来说&#xff0c;每年的学生越来越多&#xff0c;需要管理的专业也有很多&#xff0c;每次专业报名信息的统计工作就变得非常的多&#xff0c;对于报名的统计工作变得非常的复杂。进入二十一世纪后&#xff0c;各种科学技术发速发展&#xff0c;管理软件尤其明显&#…

Golang每日一练(leetDay0078) 存在重复元素 II\III ContainsDuplicate

目录 219. 存在重复元素 II Contains Duplicate ii &#x1f31f; 220. 存在重复元素 III Contains Duplicate iii &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏…

chatgpt赋能python:Python判断语句:if语句

Python判断语句&#xff1a;if语句 在Python编程中&#xff0c;判断语句是非常重要的语法之一。if语句是最基本的判断语句&#xff0c;可以根据条件的真假来执行我们需要的代码块。 什么是if语句&#xff1f; if语句是一种条件语句。在Python中&#xff0c;if语句用于执行一…

C++泛型编程之模板

目录 一、什么是泛型编程 二、函数模板 2.1函数模板的概念 2.2函数模板格式 2.3函数模板的原理 2.5函数模板的实例化 2.6模板参数的匹配原则 三、类模板 3.1类模板的定义格式 3.2 类模板的实例化 四、非类型模板参数 五、模板的特化 5.1模板特化的概念&#xff1a;…

chatgpt赋能python:Python在SEO中的应用

Python在SEO中的应用 Python是一种语言&#xff0c;用于编写应用程序。近年来&#xff0c;Python编程成为了最受欢迎的编程语言之一。Python主要用于数据分析、机器学习、人工智能等方向。但是&#xff0c;Python在SEO中的应用也引起了越来越多的人的关注。那么&#xff0c;在…

bean的作用域及生命周期

目录 bean的作用域 ①概念 ②创建类User ③配置bean ④测试 bean生命周期 ①具体的生命周期过程 ②修改类User ③配置bean ④测试 ⑤bean的后置处理器 bean的作用域 ①概念 在Spring中可以通过配置bean标签的scope属性来指定bean的作用域范围&#xff0c;各取…

Java组合模式:构建多层次公司组织架构

在现实生活中&#xff0c;常常会遇到用树形结构组织的一些场景&#xff0c;比如国家省市&#xff0c;学校班级&#xff0c;文件目录&#xff0c;分级导航菜单&#xff0c;以及典型的公司组织架构&#xff0c;整个层次结构自顶向下呈现一颗倒置的树。这种树形结构在面向对象的世…

23 直接使用 dom api 更新了 #text节点, 之后响应式更新不生效了

前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 主要记录的是 vue 的相关实现机制 呵呵 理解本文需要 vue 的使用基础, js 的使用基础 问题引发自 VueComponent 响应式处理 里面有一段内容, 直接在 console 中…