vue 中为什么需要虚拟DOM、VDOM 是如何生成的、VDOM 如何做 diff 的?

一、vue 中为什么需要虚拟DOM

1.1本概念
基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象,也就是现在大家所熟知的VNode 和VDOM

·Virtual DOM 就是用js 对象来描述真实 DOM,是对真实 DOM 的抽象,由于直接操作 DOM 性能低但是is 层的操作效率高,可以将 DOM 操作转化成对象操作,最终通过 diff 算法比对差异进行更新 DOM(减少了对真实DOM的操作)。
。虚拟DOM 不依赖真实平台环境从而也可以实现跨平台

二、VDOM 是如何生成的?

。在vue中我们常常会为组件编写模板-template
。这个模板会被编译器编译为渲染函数-render
。在接下来的挂载过程中会调用 render 函数,返回的对象就是虚拟 dom
。会在后续的 patch 过程中进一步转化为 真实dom。

三、VDOM 如何做 diff 的?

。挂载过程结束后,会记录第一次生成的 VDOM -oldVnode
当响应式数据发生变化时,将会引起组件重新 render,此时就会生成新的VDOM-newVnode。使用oldVnode 与newVnode 做 diff 操作,将更改的部分应到真实 DOM 上从而转换为最小量的 dom操作,高效更新视图。

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

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

相关文章

Jmeter执行某个请求时,先删除cookie信息

1、增加BeanShell PreProcessor 2、添加如下内容 import org.apache.jmeter.protocol.http.control.CookieManager;// Get the current threads cookie manager CookieManager cm sampler.getCookieManager();// Clear all cookies for this domain cm.clear();

力扣labuladong——一刷day45

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣270. 最接近的二叉搜索树值二、力扣404. 左叶子之和三、力扣617. 合并二叉树四、力扣623. 在二叉树中增加一行 前言 二叉树的递归分为「遍历」和「分解…

LeetCode:2304. 网格中的最小路径代价(C++)

目录 2304. 网格中的最小路径代价 题目描述: 实现代码: dp(dp有很多相似的经典题目,比较简单,不再给出解析) 2304. 网格中的最小路径代价 题目描述: 给你一个下标从 0 开始的整数矩阵 grid …

Redis篇---第十四篇

系列文章目录 文章目录 系列文章目录前言一、为什么Redis的操作是原子性的,怎么保证原子性的?二、了解Redis的事务吗?四、Redis 的数据类型及使用场景前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男…

旧电脑升级记录

我把家里的电脑搬来了北京,但是这个配置在今天已经完全不够用了,而且我也喜欢折腾,我就想着花点时间,画最少的钱来升级一下。我对电脑的硬件还是懂一点的,装机也完全不是问题。 H61的主板,所以cpu我从E3 1230V2&#…

前端js调取摄像头并实现拍照功能

前言 最近接到的一个需求十分有意思,设计整体实现了前端仿 微信扫一扫 的功能。整理了一下思路,做一个分享。 tips: 如果想要实现完整扫一扫的功能,你需要掌握一些前置知识,这次我们先讲如何实现拍照并且保存的功能。 一. windo…

了解1688API接口测试 | 1688 API接口测试指南

在当今电子商务快速发展的时代,1688作为中国最大的B2B电子商务平台之一,为商家提供了丰富的商品资源和交易平台。为了方便商家进行商品管理和交易操作,1688提供了一系列的API接口,通过这些接口,商家可以方便地获取商品…

什么是凸函数

假设函数是定义在某个向量空间的凸子集上的实值函数,并且,如果对于中的任何两个向量和,都满足: 则称为上的凸函数

ubuntu 安装 towhee

安装Towhee pip3 install towhee如果你想在 towhee 中安装模型 pip3 install towhee.models打开python终端 python3引入towhee 数据转换是 Towhee 的核心;管道只是在有向无环图中连接在一起的一系列转换。所有预构建的 Towhee 管道都有代表当前任务的名称。 fr…

Oracle数据库如何定位trace file位置

用一个示例来说明吧。 在导入master key时,出现错误: ADMINISTER KEY MANAGEMENTIMPORT KEYS WITH SECRET "my_secret"FROM /tmp/export.expIDENTIFIED BY keypwd5 WITH BACKUP; ADMINISTER KEY MANAGEMENT * ERROR at line 1: ORA-46655…

动态规划求 x 轴上相距最远的两个相邻点 java 代码实现

如图为某一状态下 x 轴上的情况,此时 E、F相距最远,现在加入一个点H,如果H位于点A的左边的话,只需要比较 A、H 的距离 和 E、F 的距离;如果点H位于点G的右边,则值需要比较 G、H 的距离 和 E、F 的距离&…

前端实现表格生成序号001、002、003自增

我们最终想要实现的效果如图&#xff0c;从后端获取数据之后&#xff0c;不使用data中的id&#xff0c;而是使用自己生成的按照顺序自增的序号id。 script <template><el-table :data"sticker" border style"width: 100%" id"stickerList&q…

[Python人工智能] 四十.命名实体识别 (1)基于BiLSTM-CRF的威胁情报实体识别万字详解

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章普及VS Code配置Keras深度学习环境,并对比常用的深度学习框架,最后普及手写数字识别案例。这篇文章将讲解如何实现威胁情报实体识别,利用BiLSTM-CRF算法实现对ATT&CK相关的技战术实体…

navicat --CSV导出数据乱码情况(三种情况解决方式)

CSV导出数据乱码情况分析及处理 在navicat 中有很多导出方式&#xff0c;大家都知道csv导出要比xlse要快很多&#xff0c;但是在使用csv导出时要防止乱码情况&#xff0c; 下面我列出三种处理方式&#xff08;如有其他方式大家可以帮忙补充一下&#xff09;&#xff1a; 文章目…

基于springboot实现班级综合测评管理系统项目【项目源码+论文说明】

基于springboot实现班级综合测评管理系统演示 摘要 随着互联网技术的高速发展&#xff0c;人们生活的各方面都受到互联网技术的影响。现在人们可以通过互联网技术就能实现不出家门就可以通过网络进行系统管理&#xff0c;交易等&#xff0c;而且过程简单、快捷。同样的&#x…

C#实现本地服务器客户端私聊通信

&#xff08;一&#xff09;需求 在游戏中我们经常能够看到玩家与玩家之间可以进行私聊&#xff0c;在QQ或微信中最基本的功能就是用户与用户之间的通信。抽象成计算机网络&#xff0c;就是两个客户端通过服务器进行私聊通信&#xff0c;两个客户端可以互相看到对方发送过来的信…

redis的高可用之持久化

1、redis的高可用考虑指标 &#xff08;1&#xff09;正常服务 &#xff08;2&#xff09;数据容量的扩展 &#xff08;3&#xff09;数据的安全性 2、redis实现高可用的四种方式 &#xff08;1&#xff09;持久化 &#xff08;2&#xff09;主从复制 &#xff08;3&…

这是基础校园二手交易框架

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>校园二手交易</title> <style> /* Reset stylesheet */ * { margin: 0; padding: 0; box-s…

Hive小文件处理

MR任务 mr任务参考链接 set hive.exec.reducers.max3 set hive.exec.dynamic.partition.mode true; --使用动态分区时&#xff0c;设置为ture。 set hive.exec.dynamic.partition.mode nonstrict; --动态分区模式&#xff0c;默认值&#xff1a;strict&#xff0c;表示必须…

搜维尔科技:Movella Xsens MVN LINK 实际应用,一镜到底!

搜维尔科技&#xff1a;Movella Xsens MVN LINK 实际应用&#xff0c;一镜到底&#xff01;