【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=

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自喻女“梵高”,VRAR元宇宙领域业余画手举办线上3D虚拟数字化处女展!

众所周知&#xff0c;梵高画作通常采用粗大的笔触和厚重的油彩&#xff0c;结合丰富且饱和的色彩&#xff0c;给人印象鲜明大胆且笔触有力&#xff0c;比如著名画作《向日葵》、《星月夜》和《加歇医生》中可以看出&#xff0c;相比传统构图规则&#xff0c;他更倾向于用自己的…

蓝桥杯 2023 省B 接龙数列

思路分析&#xff1a; 创建一个大小为10的向量 hash&#xff0c;用于记录以每个数字结尾的字符串数量。输入字符串数量 n。循环读取每个字符串&#xff0c;并更新 hash 中以当前字符串结尾的字符串数量。同时更新最大字符串数量 count。输出不可达的字符串数量&#xff0c;即 …

HubSpot出海CRM助力企业实现全球营销布局!

随着全球化的浪潮不断推进&#xff0c;越来越多的企业开始将视线投向更为广阔的国际市场&#xff0c;寻求新的增长点。然而&#xff0c;国际化拓展并非易事&#xff0c;企业需要构建一套有效的全球营销战略&#xff0c;以应对不同国家和地区的文化差异、市场需求和竞争环境。在…

漫谈5种注册中心

01 注册中心基本概念 1.1 什么是注册中心&#xff1f; 注册中心主要有三种角色&#xff1a; 服务提供者&#xff08;RPC Server&#xff09;&#xff1a;在启动时&#xff0c;向 Registry 注册自身服务&#xff0c;并向 Registry 定期发送心跳汇报存活状态。 服务消费者&…

2024热门外贸独立站wordpress模板

工艺品wordpress外贸主题 简约大气的wordpress外贸主题&#xff0c;适合做工艺品进出品外贸的公司官网使用。 https://www.jianzhanpress.com/?p5377 日用百货wordpress外贸主题 蓝色大气的wordpress外贸主题&#xff0c;适合做日用百货的外贸公司搭建跨境电商网站使用。 …

R语言程序设计(零基础速通R语言语法和常见函数的使用)

目录 1.Rstudio中的一些快捷键 2.R对象的属性 3.R语言中常用的运算符​编辑 4.R的数据结构 向量 如何建立向量&#xff1f; 如何从向量里面提取元素&#xff1f; 矩阵 如何建立矩阵&#xff1f; 如何从矩阵里面提取元素&#xff1f; 数据框 如何建立数据框&#xf…

Flink源码解析(1)job启动,从JM到TM过程详解

网络传输模型 首先在看之前,回顾一下akka模型: Flink通讯模型—Akka与Actor模型-CSDN博客 注:ActorRef就是actor的引用,封装好了actor 下面是jm和tm在通讯上的概念图: RpcGateway 不理解网关的作用,可以先移步看这里:网关_百度百科 (baidu.com) 用于定义RPC协议,是…

Linux内存管理笔记----TLB

1. TLB介绍 TLB是Translation Lookaside Buffer的简称&#xff0c;可翻译为“地址转换后援缓冲器”&#xff0c;也可简称为“快表”。 简单地说&#xff0c;TLB就是页表的Cache&#xff0c;属于MMU的一部分&#xff0c;其中存储了当前最可能被访问到的页表项&#xff0c;其内…

移远通信,开启透明天线中的“创新密码”

近日&#xff0c;全球领先的物联网整体解决方案供应商移远通信正式对外宣布&#xff0c;其以远远领先行业的速度推出前沿技术成果——5G透明天线。该天线主体选用透明薄膜材质&#xff0c;具有性能优、重量轻、尺寸灵活、透明度高、环境融合度好等优势&#xff0c;特别适用于智…

Spring单元测试+Mockito

一&#xff0c;背景 单元测试基本上是开发逃不过的一个工作内容&#xff0c;虽然往往因为过于无聊&#xff0c;或者过于麻烦&#xff0c;而停止于项目的迭代之中&#xff0c;不了了之了。其实不是开发们懒&#xff0c;而是上头要求的测试覆盖率高&#xff0c;但是又没有好用的…

MFC界面美化第三篇----自绘按钮(重绘按钮)

1.前言 最近发现读者对我的mfc美化的专栏比较感兴趣&#xff0c;因此在这里进行续写&#xff0c;这里我会计划写几个连续的篇章&#xff0c;包括对MFC按钮的美化&#xff0c;菜单栏的美化&#xff0c;标题栏的美化&#xff0c;list列表的美化&#xff0c;直到最后形成一个完整…

面试算法-52-对称二叉树

题目 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 解 class Solution {public boolean isSymmetric(TreeNode root) {return dfs(root, root);}public boolean dfs(Tr…

8年软件测试工程师感悟 —— 写给还在迷茫中的朋友

这两天和朋友谈到软件测试的发展&#xff0c;其实软件测试已经在不知不觉中发生了非常大的改变&#xff0c;前几年的软件测试行业还是一个风口&#xff0c;随着不断地转行人员以及毕业的大学生疯狂地涌入软件测试行业&#xff0c;目前软件测试行业“缺口”已经基本饱和。当然&a…

【SpringBoot】头条新闻项目实现CRUD登录注册

文章目录 一、头条案例介绍二、技术栈介绍三、前端搭建四、基于SpringBoot搭建项目基础架构4.1 数据库脚本执行4.2 搭建SprintBoot工程4.2.1 导入依赖:4.2.2 编写配置4.2.3 工具类准备 4.3 MybatisX逆向工程 五、后台功能开发5.1 用户模块开发5.1.1 jwt 和 token 介绍5.1.2 jwt…

8.发布页面

发布页面 官网 https://vkuviewdoc.fsq.pub/components/form.html 复制官网中的内容 代码 write.vue <template><view class"u-wrap u-p-l-20 u-p-r-20"><u-form :model"addModel" ref"form1"><u-form-item label&quo…

SegFormer 项目排坑记录

SegFormer 项目排坑记录 任务记录创建conda环境 准备数据库和预训练参数程序配置修改测试可视化训练 任务 需要复现SegFormer分割项目&#xff0c;似乎还有点麻烦&#xff0c;参考这几个进行复现&#xff0c;记录下过程&#xff1a; SegFormer mmsegmentation CSDN博客 知乎博…

CentOS的安装

一、打开VMware的WorkStation的软件界面。点击创建新的虚拟机。 二、我们选择自定义&#xff0c;下一步。 三、这个界面不用动&#xff0c;直接进入下一步。 四、点击稍后安装操作系统&#xff0c;下一步。 五、选择Linux操作系统&#xff0c;版本为CentOS 7 64位。 六、虚拟机…

备战蓝桥杯Day31 - 真题-管道

题目描述 解题思路 这个问题可以视为一个水波在管道中传播的问题&#xff0c;其中水波以单位速度传播。阀门在 S 时刻打开&#xff0c;水流以单位速度流向管道的右侧&#xff0c;每个传感器位于每段管道的中心。对于位于 Li 的阀门&#xff0c;在 Ti 时刻打开时&#xff0c;水…

Docker Desktop 安装 ClickHouse 超级简单教程

Docker desktop 安装 clickhouse 超级简单 文章目录 Docker desktop 安装 clickhouse 超级简单 什么是 Docker &#xff1f;安装下准备安装Docker配置安装 ClickHouse配置数据库密码DBeaver 测试创建表总结 什么是 Docker &#xff1f; 下载 Docker desktop Docker Desktop …

网络编程:多点通信+域套接字

一、多点通信 1.网络属性 getsockopt和setsockopt int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int setsockopt(int sockfd, int level, int optname, const void *optval, socklen_t optlen); 功能&#xff1a;获取或设置套接字…