【13】vue2和vue3对比

vite: https://github.com/vitejs/vite

面试题:谈谈你对 vite 的理解,最好对比 webpack 说明

webpack 原理图

在这里插入图片描述

vite 原理图

在这里插入图片描述

面试题答案:

webpack 会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。
而 vite 是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。
由于现代浏览器本身就支持 ES Module,会自动向依赖的 Module 发出请求。vite 充分利用这一点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像 webpack 那样进行打包合并。
由于 vite 在启动的时候不需要打包,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快。当浏览器请求某个模块时,再根据需要对模块内容进行编译。这种按需动态编译的方式,极大的缩减了编译时间,项目越复杂、模块越多,vite 的优势越明显。
在 HMR 方面,当改动了一个模块后,仅需让浏览器重新请求该模块即可,不像 webpack 那样需要把该模块的相关依赖模块全部编译一次,效率更高。
当需要打包到生产环境时,vite 使用传统的 rollup 进行打包,因此,vite 的主要优势在开发阶段。另外,由于 vite 利用的是 ES Module,因此在代码中不可以使用 CommonJS

客户端渲染效率比 vue2 提升了 1.3~2 倍

SSR 渲染效率比 vue2 提升了 2~3 倍

面试题:vue3 的效率提升主要表现在哪些方面?

静态提升

下面的静态节点会被提升

  • 元素节点
  • 没有绑定动态内容
// vue2 的静态节点
render(){createVNode("h1", null, "Hello World")// ...
}// vue3 的静态节点
const hoisted = createVNode("h1", null, "Hello World")
function render(){// 直接使用 hoisted 即可
}

静态属性会被提升

<div class="user">{{user.name}}</div>
const hoisted = { class: "user" };function render() {createVNode("div", hoisted, user.name);// ...
}

预字符串化

<div class="menu-bar-container"><div class="logo"><h1>logo</h1></div><ul class="nav"><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li></ul><div class="user"><span>{{ user.name }}</span></div>
</div>

当编译器遇到大量连续的静态内容,会直接将其编译为一个普通字符串节点

const _hoisted_2 = _createStaticVNode('<div class="logo"><h1>logo</h1></div><ul class="nav"><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li><li><a href="">menu</a></li></ul>'
);
image-20200929170205828 image-20200929170304873

缓存事件处理函数

<button @click="count++">plus</button>
// vue2
render(ctx){return createVNode("button", {onClick: function($event){ctx.count++;}})
}// vue3
render(ctx, _cache){return createVNode("button", {onClick: cache[0] || (cache[0] = ($event) => (ctx.count++))})
}

Block Tree

vue2 在对比新旧树的时候,并不知道哪些节点是静态的,哪些是动态的,因此只能一层一层比较,这就浪费了大部分时间在比对静态节点上

<form><div><label>账号:</label><input v-model="user.loginId" /></div><div><label>密码:</label><input v-model=

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

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

相关文章

30-2 越权漏洞

一、定义: 攻击者利用业务的设计缺陷&#xff0c;获取敏感信息或破坏业务完整性。本质是程序逻辑输入管控不严&#xff0c;未对用户数据进行严格把控&#xff0c;导致程序不能正常处理或处理错误。常见于登录注册、密码找回、信息查看、交易支付等场景。 二、类型: 未授权访…

常见的密码的分类和用途场景原理

一、按用途和管理分类 核心密码&#xff1a; 使用场景&#xff1a;专门用于保护国家最高等级的绝密信息&#xff0c;常见于政府、军队、外交等领域的重要通信及数据加密。特点&#xff1a;极高安全性&#xff0c;由国家密码管理部门统一严格管理&#xff0c;具体算法和密钥严格…

【C语言进阶篇】动态内存管理(一)

个人主页&#xff1a; 倔强的石头的博客 系列专栏 &#xff1a;C语言指南 C语言刷题系列 待补充完善

Linux的一些基本指令

​​​​​​​ 目录 前言&#xff1a; 1.以指令的形式登录 2.ls指令 语法&#xff1a; 功能&#xff1a; 常用选项&#xff1a; 3.pwd指令 4.cd指令 4.1 绝对路径与相对路径 4.2 cd .与cd ..&#xff08;注意cd后先空格&#xff0c;然后两个点是连一起的&#xff0…

华为od真题--2023C卷-地图寻宝华为OD真题题解

小华地图寻宝 题目描述 小华按照地图去寻宝&#xff0c;地图上被划分成m行和n列的方格&#xff0c;横纵坐标范围分别是[0,n-1]和[0,m-1]。在横坐标和纵坐标的数位之和不大于k的方格中存在黄金(每个方格中仅存在一克黄金)&#xff0c;但横坐标和纵坐标之和大于k的方格存在危险不…

编译执行篇

文章目录 11.1 compile()11.2 eval()11.3 exec()11.4 repr() 11.1 compile() 在Python中&#xff0c;compile()是一个内置函数&#xff0c;用于将字符串编译成字节码或AST&#xff08;抽象语法树&#xff09;对象&#xff0c;以便稍后被exec()或eval()函数执行。这对于执行动态…

2024最新华为OD机试试题库全 -【加密算法】- C卷

1. 🌈题目详情 1.1 ⚠️题目 有一种特殊的加密算法,明文为一段数字串,经过密码本查找转换,生成另一段密文数字串。 规则如下: 明文为一段数字串由 0~9 组成 密码本为数字 0~9 组成的二维数组 需要按明文串的数字顺序在密码本里找到同样的数字串,密码本里的数字串是…

YOLOv8跟踪分割+单目测距(python)

YOLOv8跟踪分割+单目测距(python) 1. 相关配置2. 测距原理和相机标定2.1 测距原理2.2 相机标定3. 相机测距3.1 测距模块3.2 测距添加4. 实验效果4.1 创建主代码4.2 实验效果相关链接 1. YOLOV7 + 单目测距(python) 2. YOLOV5 + 单目测距(python)

XUbuntu22.04之安装Plantuml(二百二十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

qemu启动过程笔记

1、进入main函数之前&#xff0c;会先注册所有的类&#xff0c;以spice为例 //定义结构 static struct QemuSpiceOps real_spice_ops {.init qemu_spice_init,.display_init qemu_spice_display_init,.migrate_info qemu_spice_migrate_info,.set_passwd qemu_s…

电脑不能读取移动硬盘,但是可以读取U盘解决方法

找到此电脑 右键设备管理器&#xff0c;找到其中的通用串行总线控制器。 注意&#xff0c;凡是插入到电脑当中不能读取的U盘或者移动硬盘&#xff0c;都会在通用串行总线控制器当中显示为USB大容量存储设备 鼠标选中“USB大容量存储设备”&#xff0c;右键卸载它。此时&#x…

AI生产中的缓存策略:降低成本提升性能

AI生产中的缓存策略&#xff1a;降低成本提升性能 概述&#xff1a; 大多数AI应用难以投入生产&#xff0c;主要障碍包括成本、性能和安全等。缓存策略在解决成本和性能问题上扮演了关键角色。 成本挑战&#xff1a; 运行AI模型尤其是大规模应用时成本很高。例如&#xff0c;…

地图定点热力图GeoJson

1.首先需要拿到地图&#xff0c;可以从不同的站点寻找&#xff0c;我这里是从hcharts里面找的 //国外地图数据地址&#xff1a; https://img.hcharts.cn/mapdata/ //国内地图数据地址&#xff1a; https://datav.aliyun.com/portal/school/atlas/area_selector2.在项目中引入e…

医院挂号系统设计与实现|jsp+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;…

蓝桥杯——朋友圈(防抖函数)

目标 请在 index.js 文件中补全代码&#xff0c;具体需求如下&#xff1a; 请将 debounce 函数补充完整&#xff0c;实现一个延迟为 delay 毫秒的防抖函数。用户在输入框&#xff08; idtext &#xff09;输入文字时&#xff0c;将用户输入的内容存入 localStorage 中&#x…

路由器里如何设置端口映射?

在互联网时代&#xff0c;我们经常需要将内部网络的服务暴露到公网以便其他人访问。直接将内部网络暴露在公网上存在一定的安全风险。为了解决这个问题&#xff0c;我们可以利用路由器里设置端口映射来实现将特定端口的访问请求转发到内部网络的特定设备上。 端口映射的原理 端…

Leetcode 3091. Apply Operations to Make Sum of Array Greater Than or Equal to k

Leetcode 3091. Apply Operations to Make Sum of Array Greater Than or Equal to k 1. 解题思路2. 代码实现 题目链接&#xff1a;3091. Apply Operations to Make Sum of Array Greater Than or Equal to k 1. 解题思路 这一题的话本质上算是一个数学题&#xff0c;具体就…

Matplotlib数据可视化实战-2绘制折线图(1)

函数plot是matplotlib.pyplot模块中的一个重要函数&#xff0c;用于在图形中绘制折线图。其基本用法是plot(x, y, [fmt], **kwargs)&#xff0c;其中x和y分别代表X轴和Y轴上的数据点&#xff0c;通常是以列表、数组或一维序列的形式给出。通常用的参数有&#xff1a; 基本参数…

Programming Abstractions in C阅读笔记:p331-p337

《Programming Abstractions in C》学习第79天&#xff0c;p331-p337&#xff0c;总计7页。 一、技术总结 /** File: stack.h* -------------* This interface defines an abstraction for stacks. In any* single application that uses this interface, the values in* the…

IEEE TRANSACTIONS ON INTELLIGENT TRANSPORTATION SYSTEMS (T-ITS) 投稿记录,欢迎大家评论~

投稿整个流程时间点&#xff1a;Submitted: 17 October 2023 Awaiting Reviewer Assignment: From 18 October 2023 to 6 November 2023 Under review: From 6 November 2023 to 30 November 2023 Awaiting reviewer scores: From 1 December 2023 to 13 January 2024 Aw…