vue生命周期和整个渲染流程

2023-10-27

vue的生命周期分为8个阶段:beforecreate       created       beforemount         mounted  beforeupdate    updated        beforedestroy       destroyed

beforeCreate:在实例初始化之后,数据观察和事件配置前被调用,主要用于初始化数据,进行非响应式数据处理

created:实例创建完成后立即被调用,实例已经完成数据检测,属性和方法的运用以及建立dom节点,但还没有被挂载在页面。可以进行一些如发送请求获取数据,进行事件监听等操作。

beforeMount:模板已经编译完成,在实例挂载至页面之前被调用,尚未将模板渲染至页面,这个时候可以进行dom操作或访问渲染虚拟的dom

mounted:模板已经渲染至页面,可任意进行dom操作,进行定时器,绑定第三方插件等

beforeUpdate:数据更新前被调用,发生虚拟dom重新渲染和补丁前,通常用来做一些准备工作,或者去保存一些需要在更新后恢复的状态。

updated:已经重新渲染和打补丁,可以进行基于更新后的操作,比如获取更新后dom元素获取,进行动画效果等

beforeDestroy:在组件被销毁之前调用,此时实例完全还可以用,通常这个阶段来做一些清理工作,比如清理定时器,事件监听,解除自定义事件

destroyed:实例销毁之后被调用,这个时候实例所有的指令已经被解除,监听器移除,子实例被销毁。这个时候通常来清理一些与实例相关的资源和进行一些最后的资源操作,如通知服务器进行资源释放。

vue2从代码到渲染结束的整个流程

1,创建vue实例,进行各种初始化操作,合并选项,初始化数据,方法,计算属性等

2,模板编译,将vue中实例模板编译成渲染函数render function

3,进行数据响应式处理,利用object.defineproperty()对数据进行数据劫持,为其绑定getter/setter方法

4,执行beforeCreate生命周期函数

5,注入依赖,初始化事件系统,进行组件依赖注入,全局依赖注入组件中,初始化事件系统

6,执行created生命周期函数,实例已经完成数据观测,属性和方法的运算,但未挂载至页面上

7,模板渲染,vue将生成的虚拟dom渲染为真实的dom,并建立dom和虚拟dom之间的关系

8,执行beforeMount生命周期函数

9,实例挂载,将真实的dom渲染挂载至指定的目标位置

10,执行mounted生命周期函数

11,数据更新,当数据发生变化,vue会进行数据更新,触发对应属性的setter函数生成更新虚拟dom

12,执行beforeUpdate生命周期函数

13,虚拟dom对页面进行重新渲染和打补丁,根据最新的数据更新虚拟dom,并进行对比,进行最小化ndom操作

14,执行updated生命周期函数

15,执行beforeDestroy生命周期函数

16,实例销毁,调用$destroy函数,解除dom关联,自定义事件,移除事件监听

17,执行destroyed生命周期函数

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue生命周期和整个渲染流程 的相关文章

  • 跨域iframe自动调整大小

    我正在使用 iframe 和 javascript 制作一个 Web 小部件 我想让我的 iframe 能够根据其内容 从其他域加载 调整大小 我做了一些搜索 包括在 Stack Overflow 上 我找到了几个主题 但我找不到关于这个问
  • Javascript 函数与 php 一样吗?

    我在网站上使用 WebIM 提供聊天支持 我希望能够在客户端启动聊天会话时设置一个计时器 如果操作员 技术人员在 x 秒内没有响应 我希望页面重定向到客户端可以留言的另一个页面 有点像 请稍等 我们尝试联系您 这样 如果所有技术人员都太忙或
  • 为什么 Eclipse 有时会对 JavaScript 中的数组数组发出警告?

    在 Eclipse 中 以下 JavaScript 行 var a1 1 2 3 4 生成警告 Type mismatch cannot convert from Number to any Type mismatch cannot con
  • 如何用js获取一个月的4个星期一?

    我正在构建一个图表 其中 x 轴应该是一个月的四个星期 我只想显示该月的四个星期一 我已经有了currentMonth和currentYear变量 而且我知道如何获取该月的第一天 我所需要的只是将一个月的四个星期一放入数组中 所有这些都在同
  • jQuery - 将所有展开的文本包装在 p 标签中

    我遇到以下情况 以下代码被写入我的页面 div Some text here which is not wrapped in tags p Some more text which is fine p p Blah blah another
  • ExitFullScreen 不起作用 + 无论如何要按键盘单击按钮?

    我的浏览器 Google Chrome 版本 33 0 1750 154 m Script function exitFullscreen var element document documentElement if element mo
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • Google 文档 - 以编程方式将鼠标点击发送到大纲窗格中的项目

    在 Google 文档中 您可以打开大纲窗格并查看文档中的所有标题 您也可以单击标题 视图将滚动到标题 我的问题是如何使用 Chrome 扩展中的 JS 以编程方式模拟鼠标单击 以将视图滚动到所需的标题 我尝试了以下代码 但没有任何反应 u
  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 从 JavaScript 将参数传递给 p:remoteCommand

    我想将值传递给remoteCommand来自 JavaScript 如果这是可能的 我该如何做到这一点以及如何在支持 bean 中接收它们 对的 这是可能的 如何执行此操作取决于 PrimeFaces 版本 你可以在PrimeFaces 用
  • 将 ESLint 与 Airbnb 样式和选项卡结合使用 (React.js)

    我正在开发一个 React js 应用程序 并且正在尝试检查我的代码 我将 ESLint 与 Airbnb 风格一起使用 但出现以下错误 src Test jsx 4 2 error Unexpected tab character no
  • 动态地将 .on() 方法与事件映射绑定

    我使用此语法来确保事件绑定动态添加li元素 ul list on click li function do something 我尝试使用这样的事件映射来存档相同的内容 ul list hammer css hacks false on s
  • 您网站上的自定义 jQuery 脚本有多少行代码?多少才算是太多呢?

    对于我们的网站 我使用了大量 jQuery 现在我正在查看基础库顶部的 340 行 jQuery 代码 多少是太多了 我将添加更多内容 我什么时候开始尝试压缩代码并最终转向 OOP 行数并不意味着什么 重要的是你实际上在做什么 您可能拥有
  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh
  • 需要根据用户选择有条件地渲染具有 X 行数的部分

    我有一个反应组件 其中包含一个下拉列表 其中的选项包括none 1 5 and 13 根据用户选择的数字 我需要渲染一个部分 其中包括许多行 每个行都有字段名称和下拉列表 如果用户不选择任何一个 我需要整个附加配置部分消失 新部分中的每个下
  • 使用 Javascript 检测 Pepper (PPAPI) Flash

    我们使用的是专有的文档查看器 它与某些 Chrome 版本中的 Pepper 版本的 Flash 配合得不太好 所以我希望能够检测到它并重定向到不同格式的相同内容 由于这个版本似乎落后于 NPAPI 版本 所以我一直在使用闪光检测 http
  • 将日期参数传递给对 MVC 操作的 ajax 调用的安全方法

    我有一个 MVC 操作 它的参数之一是DateTime如果我通过 17 07 2012 它会抛出一个异常 指出参数为空但不能有空值 但如果我通过01 07 2012它被解析为Jan 07 2012 我将日期传递给 ajax 调用DD MM
  • 如何在 ionic2 中 pop() 之后重新加载 ion-page

    我有2页Page1 and Page2 我用过this nav pop 在Page2中 它将弹出Page2 Page1将启用 但我想刷新Page1 先感谢您 您可以将父页面与导航推送一起传递 这样您就可以将父页面作为 navParamter
  • 允许 iframe 跨域链接到目标父框架

    我有 2 个域 域 1 上的一个页面使用 iframe 加载域 2 中的内容 如何允许来自domain2 iframe 内 的链接在domain1 的完整父框架中打开 我一直在关注IE和w3c的新沙箱属性 http www w3 org T

随机推荐

  • AI绘图实战(十):制作线稿矢量图之包头巾的女人,画矢量图/生成矢量图/导出矢量图/直出svg/vector studio插件使用

    S AI能取代设计师么 I 至少在设计行业 目前AI扮演的主要角色还是超级工具 要顶替 除非甲方对设计效果无所畏惧 预先学习 安装及其问题解决参考 Windows安装Stable Diffusion WebUI及问题解决记录 运行使用时问题
  • pytorch——两个全连接神经网络的通用模型

    文章目录 用于分类的全连接神经网络 用于拟合的全连接神经网络 代码中都加了详细的注释 因此文章中不再赘述 用于分类的全连接神经网络 loss函数采用Cross Entropy Loss 优化器采用随机梯度下降优化器 SGD 激活函数 ReL
  • KMP,从常规思路到KMP的转变,KMP到底怎么想出来的?

    1 算法简介 KMP算法的名字是由创造出该算法的三位工程师的名字组成的 该算法是为了解决在字符串中匹配某个字串的问题 在我们的生活中经常会遇到在字符串中匹配某个字串的情况 例如我们常在某个文本中查找某个部分 这时候就需要用到字符串匹配字串来
  • vue初始化项目时报错: Error: Cannot find module ‘vue-template-compiler‘

    在初始化Vue3的项目时 按照正常流程创建项目 到最后阶段cmd窗口报错 Error Cannot find module vue template compiler 不能找到 vue template compiler 模块 出现这个问题
  • 解决shell脚本不能激活conda环境

    我想写个bash脚本激活Python3 6环境 使用tensorboard可视化查看数据 conda activate tf tensorboard logdir logs port 10010 傻逼报错 用conda init bash也
  • MySQL中的用户管理

    系列文章目录 MySQL常见的几种约束 MySQL中的函数 MySQL中的事务 MySQL中的视图 MySQL中的索引 文章目录 系列文章目录 前言 一 用户管理 1 用户管理入门 2 用户管理操作及示例 二 权限管理 1 权限管理语法 2
  • Spring Boot logback 日志配置

    Logback 使用 默认情况下 Spring Boot会用Logback来记录日志 并用INFO级别输出到控制台 在运行应用程序和其他例子时 你应该已经看到很多INFO级别的日志了 从上图可以看到 日志输出内容元素具体如下 时间日期 精确
  • 45岁程序员存款80万大胆裸辞,追求人身自由,网友:羡慕嫉妒恨

    最近知乎上的一个问题突然火了 原题如下 对于这个问题你的答案是什么呢 下面的一条回答获得了网友好几千的点赞 一起来看看 答主是一位45岁的程序员 在中型互联网公司 在回答中他称自己已经提出了离职 年底就能彻底歇业 而他的太太42岁 目前也在
  • ArrayList和List的主要区别

    主要区别就是ArrayList不安全 List和ArrayList的用法是不同的 List
  • 2022 CISCN 创新能力实践赛初赛WP

    WP来自齐鲁师范学院网络安全社团 文章目录 MISC ez usb everlasting night babydisk WEB Ezpop online crt PWN login nomal CRY 基于挑战码的双向认证1 基于挑战码的
  • python 爬虫之 爬取网页并保存(简单基础知识)

    抓取网页效果图 代码在最后 基础知识认识 首先导入所需要的库 from fake useragent import UserAgent 头部库 from urllib request import Request urlopen 请求和打开
  • Tomcat远程访问不到的问题

    Android老人学SpringBoot Tomcat在Linux端部署 远程访问不到的解决思路 解决思路 Tomcat在Linux端部署 远程访问不到的解决思路 Linux环境配置 服务器部署等不详细说 默认大家已经做好了 老人小白 今天
  • Sql去重查询数据

    最近在工作过程中 面试过程中 部分求职者或者同事 对sql怎么去重查询 不是太熟练 今天下午忙里偷闲 整理了一下 其实sql基本的查询 还是蛮有意思 下面是我大致整理的几种去重查询 1 存在2条一样的数据 使用distinct eg sel
  • linux下mysql主从复制配置几种情况(库名不同、同步部分库表、忽略某几个表不同步等)

    前提条件 1 主从服务器操作系统版本和位数一致 2 Master 和 Slave 数据库的版本要一致 3 Master 和 Slave 数据库中的数据要一致 4 Master 开启二进制日志 Master 和 Slave 的 server
  • 78. 子集、90. 子集 II、491. 递增子序列

    78 子集 题目描述 给你一个整数数组 nums 数组中的元素 互不相同 返回该数组所有可能的子集 幂集 解集 不能 包含重复的子集 你可以按 任意顺序 返回解集 解答 子集问题其实和组合问题很相似 不同在于子集问题需要在每次取数后都存入结
  • R语言常用的绘图参数

    1 点线结构参数 在plot函数中 使用参数type来控制点线输出结构 参数type的取值及定义 参数取值 描述 type p 点 type l 线 type b 点连线 type o 线穿过点 type h 悬垂线 type s 阶梯线
  • Oracle ORA-00903:表名无效

    order是保留字 如果不小心用了order这个单词就只能加上双引号 order 操作
  • 报错:ABRT 已检测到 ‘1‘ 个问题。预了解详细信息请执行:abrt-cli list --since 1653881497

    文章目录 ABRT 已检测到 1 个问题 预了解详细信息请执行 abrt cli list since 1653881497 报错 表现 解决方案 检测 ABRT 已检测到 1 个问题 预了解详细信息请执行 abrt cli list si
  • python--继承

    1 python继承的基本概念 在程序中 继承描述的是多个类之间的所属关系 如果一个类A里面的属性和方法可以复用 则可以通过继承的方式 传递到类B里 那么类A就是基类 也叫做父类 类B就是派生类 也叫做子类 继承 描述的类与类之间所属关系
  • vue生命周期和整个渲染流程

    vue的生命周期分为8个阶段 beforecreate created beforemount mounted beforeupdate updated beforedestroy destroyed beforeCreate 在实例初始化