虚拟DOM详解

news2024/11/25 9:52:32

面试题:请你阐述一下对vue虚拟dom的理解

  1. 什么是虚拟dom?

    虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构

    在vue中,每个组件都有一个render函数,每个render函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树

    image-20210225140726003
  2. 为什么需要虚拟dom?

    vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实DOM,由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。

    因此,vue在渲染时,使用虚拟dom来替代真实dom,主要为解决渲染效率的问题。

  3. 虚拟dom是如何转换为真实dom的?

    在一个组件实例首次被渲染时,它先生成虚拟dom树,然后根据虚拟dom树创建真实dom,并把真实dom挂载到页面中合适的位置,此时,每个虚拟dom便会对应一个真实的dom。

    如果一个组件受响应式数据变化的影响,需要重新渲染时,它仍然会重新调用render函数,创建出一个新的虚拟dom树,用新树和旧树对比,通过对比,vue会找到最小更新量,然后更新必要的虚拟dom节点,最后,这些更新过的虚拟节点,会去修改它们对应的真实dom

    这样一来,就保证了对真实dom达到最小的改动。

    image-20210225144108143
  4. 模板和虚拟dom的关系

    vue框架中有一个compile模块,它主要负责将模板转换为render函数,而render函数调用后将得到虚拟dom。

    编译的过程分两步:

    1. 将模板字符串转换成为AST
    2. AST转换为render函数

    如果使用传统的引入方式,则编译时间发生在组件第一次加载时,这称之为运行时编译。

    如果是在vue-cli的默认配置下,编译发生在打包时,这称之为模板预编译。

    编译是一个极其耗费性能的操作,预编译可以有效的提高运行时的性能,而且,由于运行的时候已不需要编译,vue-cli在打包时会排除掉vue中的compile模块,以减少打包体积

    模板的存在,仅仅是为了让开发人员更加方便的书写界面代码

    vue最终运行的时候,最终需要的是render函数,而不是模板,因此,模板中的各种语法,在虚拟dom中都是不存在的,它们都会变成虚拟dom的配置

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

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

相关文章

基于视频技术与AI检测算法的体育场馆远程视频智能化监控方案

一、方案背景 近年来,随着居民体育运动意识的增强,体育场馆成为居民体育锻炼的重要场所。但使用场馆内的器材时,可能发生受伤意外,甚至牵扯责任赔偿纠纷问题。同时,物品丢失、人力巡逻成本问题突出,体育场…

系统集成|第十九章(笔记)

目录 第十九章 风险管理19.1 风险管理的概述及相关概念19.2 主要过程19.2.1 规划风险管理19.2.2 识别风险19.2.3 实施定性风险分析19.2.4 实施定量风险分析19.2.5 规划风险应对19.2.6 控制风险 上篇:第十八章、安全管理 下篇:第二十章、收尾管理 第十九…

什么是密码管理,密码管理的重要性

密码管理是通过遵守一套可持续的做法,在从创建到关闭的整个生命周期中保护和管理密码的过程。这是在存储特权的密码管理器的帮助下实现的 使用内置加密保管库的凭据。 随着 IT 环境的扩展,密码激增,并且随着需要保护的密码越来越多&#xff…

SpringMVC 学习(八)整合SSM

10. 整合 SSM (1) 新建数据库 CREATE DATABASE SSM;USE SSM;DROP TABLE IF EXISTS BOOKS;CREATE TABLE BOOKS (BOOK_ID INT(10) NOT NULL AUTO_INCREMENT COMMENT 书ID,BOOK_NAME VARCHAR(100) NOT NULL COMMENT 书名,BOOK_COUNTS INT(11) NOT NULL COMMENT 数量,DETAIL VARCH…

《计算机视觉中的多视图几何》笔记(12)

12 Structure Computation 本章讲述如何在已知基本矩阵 F F F和两幅图像中若干对对应点 x ↔ x ′ x \leftrightarrow x x↔x′的情况下计算三维空间点 X X X的位置。 文章目录 12 Structure Computation12.1 Problem statement12.2 Linear triangulation methods12.3 Geomet…

NLP的不同研究领域和最新发展的概述

一、介绍 作为理解、生成和处理自然语言文本的有效方法,自然语言处理 (NLP) 的研究近年来迅速普及并被广泛采用。鉴于NLP的快速发展,获得该领域的概述和维护它是困难的。这篇博文旨在提供NLP不同研究领域的结构化概述,…

淘宝商品详情接口数据采集用于上货,无货源选品上货,采集淘宝天猫商品详情数据

淘宝商品详情接口数据采集可用于上货。先通过关键字搜索接口,抓取到批量的商品ID,再将商品ID传入商品详情数据采集接口的请求参数中,从而达到批量抓取商品详情数据的功能。 接口名称:item_get,获取商品详情数据&#…

读高性能MySQL(第4版)笔记17_复制(下)

1. 复制切换 1.1. 复制是高可用性的基础 1.1.1. 总是保留一份持续更新的副本数据,会让灾难恢复更简单 1.2. “切换副本”(promoting a replica)和“故障切换”(failing over)是同义词 1.2.1. 意味着源服务器不再接…

JDBC【DBUtils】

一、 DBUtils工具类🍓 (一)、DBUtils简介🥝 使用JDBC我们发现冗余的代码太多了,为了简化开发 我们选择使用 DbUtils Commons DbUtils是Apache组织提供的一个对JDBC进行简单封装的开源工具类库,使用它能够简化JDBC应用程序的开发&#xff0c…

Ubuntu 20.04二进制部署Nightingale v6.1.0和Prometheus

sudo lsb_release -r可以看到操作系统版本是20.04,sudo uname -r可以看到内核版本是5.5.19。 sudo apt-get update进行更新镜像源。 完成之后,如下图: sudo apt-get upgrade -y更新软件。 选择NO,按下Enter。 完成如下&…

C# Onnx Yolov8 Detect 手势识别

效果 Lable five four one three two 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing;…

软件设计师考试

知识点速记 数据库 三范式和BC范式之间的关系 并发操作带来的问题是数据的不一致性,主要有三类: 丢失更新:两个事务T1和T2读入同一数据并修改,T2提交的结果破坏了T1提交的结果,导致T1的修改被丢失 不可重复读,不可重…

【小笔记】fasttext文本分类问题分析

【学而不思则罔,思维不学则怠】 2023.9.28 关于fasttext的原理及实战文章很多,我也尝试在自己的任务中进行使用,是一个典型的短文本分类任务,对知识图谱抽取的实体进行校验,判断实体类别是否正确,我构建了…

windows 下 vs code 格式化代码(clang-format)

vscode 的格式化代码能力来源于插件(有不止一种插件提供格式化功能),而非 vscode 本身 1、安装插件 2、windows 下载 LLVM-17.0.1-win64.exe (exe 结尾的安装包) Releases llvm/llvm-project GitHub 可以直接把这…

python - random模块随机数常用方法

文章目录 前言python - random模块随机数常用方法1. 返回1-10之间的随机数,不包括102. 返回1-10的随机数,包括103. 随机选取0到100之间的偶数4. 返回一个随机浮点数5. 返回一个给定数据集合中的随机字符6. 从多个字符中选取特定数量的字符7. 生成随机字符…

巧用@Conditional注解根据配置文件注入不同的bean对象

项目中使用了mq,kafka两种消息队列进行发送数据,为了避免硬编码,在项目中通过不同的配置文件自动识别具体消息队列策略。这里整理两种实施方案,仅供参考! 方案一:创建一个工具类,然后根据配置文…

23.09.26用户切库流程记录

23.09.26用户切库流程记录 hello,我是阿昌,今天记录一下最近切库的流程,内容如下: 一、切库的原因 因为db_A用户数据量超过预期,磁盘空间逐渐不足,需要换成db_A库的压力,所以将部分db_A用户切…

外卖侠CPS小程序_带有分销功能的完整全套源码【前后端】

外卖侠CPS全套源码是一款为外卖平台提供分销功能的微信小程序。用户可以通过你的链接去领取外卖红包,然后去下单点外卖,既能省钱,又能获得佣金。该小程序带有商城、影票、吃喝玩乐等多个模块,适合不同用户的需求。 外卖CPS的势头…

第一届龙信杯取证比赛部分题目复现

感谢大佬是toto的wp 第一届“龙信杯”电子数据取证竞赛Writeup-CSDN博客 手机取证 1.请分析涉案手机的设备标识是_______。(标准格式:12345678) 打开龙信取证软件分析镜像即可得到结果 2.请确认嫌疑人首次安装目标APP的安装时间是______。…

FreeRTOS入门教程(任务优先级,Tick)

文章目录 前言一、什么是任务优先级二、FreeRTOS如何分辨出优先级最高可运行的任务三、FreeRTOS中的时钟节拍Tick四、什么是时间片五、相同优先级任务怎么进行切换六、任务优先级实验七、修改任务优先级总结 前言 本篇文章将带大家学习FreeRTOS中的任务优先级,并且…