Vue 模版编译原理

当我们使用Vue编写完一个组件以后,Vue会根据模版编译一个render函数,调用render函数生成虚拟DOM,然后将虚拟DOM映射成真实DOM
当数据发生变化时,Vue会触发更新视图,调用render函数返回新的虚拟DOM,对比新旧虚拟DOM,修改真实DOM,从而更新页面
在此期间,有以下4个关键步骤:

  1. 模版编译。生成渲染函数render
  2. 执行render函数生成虚拟DOM
  3. 首次渲染,根据虚拟DOM生成真实DOM
  4. 状态更新后,使用DIFF算法,比较两个虚拟DOM,生成真实DOM

模版编译
模板编译的目标是生成render函数,Vue在实例化组件的时候会生成虚拟DOM,Vue会判断是否有render函数,有就调用,渲染函数执行后,会得到一份vnode用于虚拟DOM渲染。没有的话就获取template中的元素,进行模版编译,生产渲染函数。每次执行渲染函数,就会生成一份最新的vnode,然后使用最新的vnode进行渲染虚拟DOM,进而生成真实DOM。
模版编译有以下步骤:

  1. 将模版解析为AST(抽象语法树)
  2. 遍历AST标记静态节点
  3. 使用AST生成渲染函数

虚拟DOM可以用来描述真实DOM的JS数据结构,是一个树状结构,每个节点所对应的dom元素,都保存了dom元素的标签名、属性和子节点等信息
虚拟DOM主要有以下作用:

  1. 维护视图与状态的关系,在改变状态后,Vue会生成新的虚拟DOM,然后使用Diff算法对比新旧虚拟DOM,得到区别,然后调用patch函数,达到更新真实DOM的目的
  2. 避免手工操作DOM,提升项目的可维护性
  3. 跨平台性更好(虚拟DOM可以将对DOM的操作抽象为对JS对象的操作,这些操作可以被适配到不同平台上,比如浏览器、移动端、甚至是服务器渲染)
  4. 服务端渲染(SSR)
  5. 原生应用(React Native、Weex)
  6. 小程序(uniapp)

Diff算法过程
大概过程是,从根节点开始对比两颗虚拟DOM树中的各个节点:

  1. 如果新旧节点的引用一致,可以认为没有变化
  2. 比较新旧节点文本,需要修改的话,就更改对应的文本
  3. 如果新节点没有子节点,老节点有子节点,直接删除老的子节点
  4. 如果新节点有子节点,老节点没有子节点,则创建新的子节点
  5. 如果都有子节点,但是两者引用不同,会调用uodateChildren函数比较子节点

updataChildren
该操作可以将老的子节点通过DOM操作转为新节点
一个基本的思想就是利用两层循环,外层循环遍历新虚拟DOM的每个节点,在内层循环遍历老虚拟DOM的节点,如果老虚拟DOM节点中有新虚拟DOM中的节点,就移动到新虚拟DOM相应位置,如果没有就创建一个新的节点放到相应的位置,遍历完成后,如果老的虚拟DOM中还有节点,则直接将剩余的节点全部删除
可以做出相关的优化
在新老虚拟DOM首尾各添加一个指针,每次对比这四个指针对应的节点,如果老的首节点或者尾节点能和新的首节点或者尾节点匹配上,将老的对应的节点直接移动到新的对应的节点位置,如果没有匹配到就继续在老的虚拟DOM中寻找,如果没有就直接建立新的,然后移动新老节点的头部,直到新虚拟DOM中的首尾相遇,如果这时候老的虚拟DOM中还有节点,则直接删除

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

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

相关文章

重置reactive对象(深拷贝与浅拷贝)

需求&#xff0c;点击不同登录方式&#xff0c;该图标高亮&#xff0c;别的图标置灰。&#xff08;高亮和置灰都有相应的引入图片&#xff09; <div class"other_icon"><img click"changeLoginType(item.index)" v-for"item in imgAddress&…

Docker数据卷挂载

一、容器与数据耦合的问题: 数据卷是虚拟的&#xff0c;不真实存在的&#xff0c;它指向文件中的文件夹 &#xff0c;属主机文件系统通过数据卷和容器数据进行联系&#xff0c;你改变我也改变。 解决办法&#xff1a; 对宿主机文件系统内的文件进行修改&#xff0c;会立刻反应…

HBase的Python API操作(happybase)

一、Windows下安装Python库&#xff1a;happyhbase pip install happybase -i https://pypi.tuna.tsinghua.edu.cn/simple 二、 开启HBase的Thrift服务 想要使用Python API连接HBase&#xff0c;需要开启HBase的Thrift服务。所以&#xff0c;在Linux服务器上&#xff0c;执行…

Day23:事务管理、显示评论、添加评论

事务管理 事务的定义 什么是事务 事务是由N步数据库操作序列组成的逻辑执行单元&#xff0c;这系列操作要么全执行&#xff0c;要么全放弃执行。 事务的特性(ACID) 原子性(Atomicity):事务是应用中不可再分的最小执行体&#xff08;事务中部分执行失败就会回滚 。一致性(C…

Windows入侵排查

目录 0x00 前言 0x01 入侵排查思路 1.1 检查系统账号安全 1.2 检查异常端口、进程 1.3 检查启动项、计划任务、服务 0x00 前言 当企业发生黑客入侵、系统崩溃或其它影响业务正常运行的安全事件时&#xff0c;急需第一时间进行处理&#xff0c;使企业的网络信息系统在最短时…

adb: error: failed to get feature set: no devices/emulators found

这个错误信息 adb: error: failed to get feature set: no devices/emulators found 表明 adb 工具无法找到任何连接的Android设备或模拟器来执行安装操作。这通常发生在以下几种情况&#xff1a; 没有设备连接&#xff1a;确保你的Android设备已经通过USB线连接到电脑&#xf…

Scikit-learn 数据挖掘和数据分析工具的使用指南

Scikit-learn是Python中一款非常强大且广泛使用的数据挖掘和数据分析工具。它为数据挖掘和数据分析任务提供了简单高效的接口&#xff0c;涵盖了分类、回归、聚类、降维、模型选择等多个方面。以下是一份详细的使用指南&#xff0c;帮助用户更好地理解和使用Scikit-learn。 一…

js如何遍历查询一个颗树

近段时间去面试的时候&#xff0c;被面试官问到如何遍历查询一个颗树的时候&#xff0c;可能最近自己看了数据结构的书之后&#xff0c;隐隐约约就想到二叉树的三种排序&#xff08;前序、中序、后序&#xff09;&#xff0c;但是当时自己没有想起这三种排序的名字&#xff0c;…

6_相机坐标系_相机4个坐标系详述

相机系列文章是用来记录使用opencv3来完成单目相机和6轴机械臂手眼标定。本人吃饭的主职是linux下6轴机械臂相关应用开发。但对于机械臂运动学、相机应用等都非常感兴趣&#xff0c;所以对一些线性代数基础薄弱又想深入了解机械臂内部运算的同志比较有体会。由于是探索性学习&a…

9.windows ubuntu 子系统,centrifuge:微生物物种分类。

上次我们用了karken2和bracken进行了物种分类&#xff0c;这次我们使用centrifuge. Centrifuge 是一种用于快速和准确进行微生物分类和物种鉴定的软件。其主要功能包括&#xff1a; 快速分类和物种鉴定: Centrifuge 可以对高通量测序数据&#xff08;如 metagenomic 或 RNA-Se…

2018年亚马逊云科技推出基于Arm的定制芯片实例

2018年&#xff0c;亚马逊云技术推出了基于Arm的定制芯片。 据相关数据显示&#xff0c;基于Arm的性价比比基于x86的同类实例高出40%。 这打破了对 x86 的依赖&#xff0c;开创了架构的新时代&#xff0c;现在能够支持多种配置的密集计算任务。 这些举措为亚马逊云技术的其他创…

OSPF-区域间路由计算

一、概述 前面学习了我们学习了Router-LSA和Network-LSA&#xff0c;它们都只能在区域内进行泛洪&#xff0c;而且我们之前一直主要是单区域学习。OSPF的核心是骨干区域Area 0&#xff0c;其它都为非骨干区域。但是在大型网络中&#xff0c;单区域OSPF会存在一定的问题&#xf…

linux的git命令学习[常见命令]

linux的git命令学习 工作做使用vscode下的git插件来管理代码的。 #安装git apt-get install git #配置ssh密钥 ssh-keygen -t rsa -C "name"cat ~/.ssh/id_rsa.pub#复制ssh密钥到github账号配置好就可以进行ssh克隆了 #配置账号&#xff0c;邮箱 git config -…

HWOD:九键输入法的转换

一、知识点 A的ASCII码是65&#xff0c;Z的ASCII码是90 a的ASCII码是97&#xff0c;z的ASCII码是122 从z到a的反循环&#xff0c;用26求余数 二、题目 1、描述 九键手机键盘上的数字与字母的对应&#xff1a; 1--1&#xff0c; abc--2, def--3, ghi--4, jkl--5, mno--6, …

企微获客助手功能,行为触发如何实现回传的?

获客助手&#xff0c;这个听起来就相当酷炫的名字&#xff0c;它实际上是一个帮助企业将推广流量快速导入企业微信的神器。通过它&#xff0c;企业可以吸引越来越多的用户加为好友&#xff0c;从而建立起更紧密的客户关系。但是&#xff0c;如何进一步提升导入企业微信的流量质…

【机器学习之旅】概念启程、步骤前行、分类掌握与实践落地

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

解锁交互魔法:探索Vue中的v-on指令!

&#x1f31f; Vue开发者必看&#xff01; &#x1f31f; 想要为你的Vue应用添加交互性&#xff1f;那就要了解 Vue 的神奇技能之一&#xff1a;v-on指令&#xff01;&#x1f680; &#x1f3af; v-on指令&#xff1a;在Vue中&#xff0c;v-on指令用于监听DOM事件&#xff0…

“浙江制造”认证+立标,开拓“宁波”未来之旅

&#x1f913;高品质高质量的“代名词”&#xff1a; &#x1f64e;&#x1f3fb;‍♂️“浙江制造”是以“区域品牌、&#x1f349;先进标准、市场认证、国际认同”为核心&#xff0c;&#x1f345;以“标准认证”为手段&#xff0c;集质量、&#x1f955;技术、服务、信誉为…

【深度学习|基础算法】2.AlexNet学习记录

AlexNet示例代码与解析 1、前言2、模型tips3、模型架构4、模型代码backbonetrainpredict 5、模型训练6、导出onnx模型 1、前言 AlexNet由Hinton和他的学生Alex Krizhevsky设计&#xff0c;模型名字来源于论文第一作者的姓名Alex。该模型以很大的优势获得了2012年ISLVRC竞赛的冠…

macOS安装mongoDB(homebrew)

使用 Homebrew Homebrew 是 macOS 的一个包管理器&#xff0c;可以非常方便地安装 MongoDB 和其他软件。如果你还没有安装 Homebrew&#xff0c;可以从它的官网上找到安装指令。 已安装 Homebrew的话&#xff0c;先更新一下homebrew brew update 你可以使用下面的命令来安装…