无虚拟 DOM 版 Vue 进行到哪一步了?

news2024/11/30 11:26:47

前言

就在一年前的 Vue Conf 2022,尤雨溪向大家分享了一个非常令人期待的新模式:无虚拟 DOM 模式!

我看了回放之后非常兴奋,感觉这是个非常牛逼的新 feature,鉴于可能会有部分人还不知道或者还没听过什么是 Vue 无虚拟 DOM 模式,我们先来简单的介绍一下:Vue 无虚拟 DOM 编译模式在官方那边叫 Vue Vapor Mode,直译过来就是:Vue 蒸汽模式。

为什么叫蒸汽模式呢?个人瞎猜的哈:第一次工业革命开创了以机器代替手工劳动的时代,并且是以蒸汽机作为动力机被广泛使用为标志的。这跟 Vue1 有点像,Vue 赶上了前端界的第一次工业革命(以声明式代替命令式的时代),此时的 Vue 还没有虚拟 DOM,也就是 Vue 的蒸汽时代。

不过万万没想到的是历史居然是个轮回,当年火的不行的虚拟 DOM 如今早已日薄西山、跌落了神坛,现在无虚拟 DOM 居然又开始重返王座。当然重返王座这个说法也不是很准确,只能说开始演变成为了一种新的流行趋势吧!这无疑让尤大想起了那个蒸汽时代的 Vue1,于是就起名为 Vapor

当然也有这么一种可能:自从为自己的框架起名为 Vue 之后,尤大就特别钟意以 V 开头的单词,不信你看:

  • Vue
  • Vite
  • Vetur
  • Volar
  • Vapor

不过以上那些都是自己瞎猜的,人家到底是不是那么想的还有待商榷。可以等下次他再开直播时发弹幕问他,看他会怎么回答。

但是吧,都过了一年多了,这个令我特别期待的新特性一点信都没有,上网搜到的内容也都是捕风捉影,这甚至让我开始怀疑 Vapor Mode 是不是要难产了?不过好在一年后的今天,Vue Conf 2023 如期而至,在那里我终于看到了自己所期待的与 Vapor Mode 有关的一系列信息。

正文

请添加图片描述

他说第三第四季度会主要开发 Vapor Mode,我听了以后直呼好家伙!合着这一年的功夫一点关于 Vapor Mode 相关的功能都没开发,鸽了一年多啊!

请添加图片描述

[译]:这是一个全新的编译策略,还是相同的模板语法一点没变,但编译后的代码性能更高。利用 Template 标签克隆元素 + 更精准的绑定,并且没有虚拟 DOM

请添加图片描述

他说 Vapor 是一个比较大的工程,所以会分阶段开发,他目前处在第一阶段。第一阶段是运行时,毕竟以前的组件编译出来的是虚拟 DOM,而 Vapor 编译出的则是真实 DOM,这需要运行时的改变。他们基本已经实现了这一点,现在正在做一些性能测试,测试效果很不错,性能有大幅度的提升。

下一阶段则是编译器,也就是说他们现在虽然能写出一些 Vapor Mode 的代码来测试性能,但写的基本上都是编译后的代码,人肉编译无疑了。

第三阶段是集成,第四阶段是兼容特殊组件,接下来进行每个阶段的详细介绍。

第一阶段

请添加图片描述

他们先实现了 v-ifv-for 等核心指令的 runtime,看来以前的 v-ifv-for 代码不能复用啊,还得重新实现。然后他们用 Benchmark 做了一些基准测试,效果非常理想,更合理的内存利用率,性能有着明显的提升。还有与服务端渲染兼容的一些东西,他们还是比较重视 SSR 的。

第二阶段

请添加图片描述

他们希望能生成一种中间语言,因为现在用 JSX 的人越来越多了,我知道肯定有人会说我身边一个用 JSX 的都没有啊(指的是 Vue JSX,不是 React JSX)咱们暂且先不讨论这种身边统计法的准确性,咱就说 Vue 的那些知名组件库,大家可以去看看他们有多少都用了 JSX 来进行开发的。只能说是 JSX 目前相对于 SFC 而言用的比较少而已,但它的用户量其实已经很庞大了:

请添加图片描述

我知道肯定还会有人说:这个统计数据不准,别的包依赖了这个包,下载别的包的时候也会顺带着下载这个包。其实这个真的没必要杠,哪怕说把这个数据减少到一半那都是每周 50 万的下载量呢!就像是国内 185 的比例很小吧?但你能说国内 185 的人很少么?哪怕比例小,但由于总数大,一相乘也照样是个非常庞大的数字。

Vue 以前是通过 render 函数来进行组件的渲染的,而如今 Vapor Mode 已经没有 render 函数了,所以不能再手写 render 了,来看一个 Vue 官网的例子:

请添加图片描述

由于 Vapor Mode 不支持 render 函数,如果想要拥有同样的灵活性那就只有 JSX,所以他们希望 SFCJSX 能编译成同一种中间语言,然后再编译为真实 DOM

第三阶段

请添加图片描述

尤大希望 Vapor Mode 是个渐进式的功能而不是破坏性功能,所以他们要做的是让 Vapor Mode 的代码可以无缝嵌入到你现有的项目中而不必重构。不仅可以选择在组件级别嵌入,甚至还可以选择在项目的性能瓶颈部分嵌入 Vapor Mode。如果你开发的是一个新项目的话,你也可以让整个项目都是 Vapor Mode,这样的话就可以完全删除掉虚拟 DOM 运行时,打包出来的尺寸体积会更小。

最牛逼的是还可以反向操作,还可以在无虚拟 DOM 组件里运行虚拟 DOM 组件。比方说你开发了款无虚拟 DOM 应用,但你需要组件库,组件库是虚拟 DOM 写的,没关系,照样可以完美运行!

第四阶段

请添加图片描述

这一阶段要让 Vapor 支持一些特殊组件,包括:

  • <transition>
  • <keep-alive>
  • <teleport>
  • <suspense>

等这一阶段忙完,整个 Vapor Mode 就可以正式推出了。

源码解析

本想着带大家看看源码,但非常不幸的是目前没在 GitHubVue 仓库里发现任何有关 Vapor Mode 的分支,可能是还没传呢吧。关注我,我会实时紧跟 Vue Vapor 的动态,并会试图带着大家理解源码。其实我是希望他能早点把源码给放出来的,因为一个新功能或者一个新项目就是在最初始的阶段最好理解,源码也不会过于的复杂,后续随着功能的疯狂迭代慢慢的就不那么易于理解了。而且跟着最初的源码也可以很好的分析出他的后续思路,想要实现该功能后面要怎么做,等放出下一阶段源码时就能很好的延续这种思路,这对于我们学习高手思路而言非常有帮助。

而且我怀疑会有些狗面试官现在就开始拿跟这玩意有关的东西做面试题了,你别看这项功能还没正式推出,但有些狗官就是喜欢问这些,希望能把你问倒以此来压你价。

我们经常调侃说学不动了,尤雨溪还纳闷这功能不影响正常使用啊?有啥学习成本呢?如果他真的了解国情的话就会知道学不动的压根就不是写法,而是源码!

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

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

相关文章

哈佛“聘请”AI担任导师,主讲教授:别全信它的,学生应“批判性地思考”

就在人们为AI聊天机器人的利弊争论不休时&#xff0c;哈佛宣布了一个重磅决定&#xff1a;将利用类似ChatGPT的聊天机器人来帮助授课了。 负责的还是计算机系的旗舰项目 —— 计算机科学导论&#xff0c;也就是著名的 CS50。借助机器人导师&#xff0c;哈佛的 CS50 项目将拥有…

Python、Selenium实现问卷星自动填写(内含适配个人问卷的方法)

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Py…

有哪些好用的远程传输大文件的软件

随着网络技术的日益进步和普及&#xff0c;大文件远程传输已经成为了人们生活和工作中必不可少的一部分。然而&#xff0c;在远程传输大文件的过程中&#xff0c;经常会遇到传输速度慢、容易受到干扰等问题&#xff0c;因此需要一款高效、稳定、安全的大文件远程传输软件来解决…

CCF真题练习:202209-1如此编码

题目背景 某次测验后&#xff0c;顿顿老师在黑板上留下了一串数字 23333 便飘然而去。凝望着这个神秘数字&#xff0c;小 P 同学不禁陷入了沉思…… 题目描述 已知某次测验包含 n 道单项选择题&#xff0c;其中第 i 题&#xff08;1≤i≤n&#xff09;有 个选项&#xff0c;…

【Vue 面试题10道】我好像之前想过要写,不过之前JavaScript面试题比较多,就暂时略过了,这些应该几乎把常问的都包括了

博主&#xff1a;_LJaXi Or 東方幻想郷 专栏&#xff1a; 前端面试题 开发工具&#xff1a;Vs Code 本题针对 Vue2 这些几乎把常用的都包括了&#xff0c;问别的就没意思了&#xff0c;毕竟工作拧螺丝嘛 我都好久不用Vue了&#xff0c;不过用了React再回看Vue感觉好简单啊… 其…

数据库性能优化中的查询优化

数据库性能优化中的查询优化 概述 在数据库应用中&#xff0c;查询操作是最常见的操作之一。查询优化是数据库性能优化的关键一环&#xff0c;通过对查询语句和查询执行计划的优化&#xff0c;可以显著提高数据库系统的性能和效率。本文将介绍查询优化的相关知识&#xff0c;…

结构型模式 - 代理模式

概述 由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时&#xff0c;访问对象不适合或者不能直接引用目标对象&#xff0c;代理对象作为访问对象和目标对象之间的中介。 Java中的代理按照代理类生成时机不同又分为静态代理和动态代理。静态代理代理类在编译期…

Docker 基础知识解析:容器与传统虚拟化对比:资源利用、启动时间、隔离性和部署效率

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

Vscode配置grpc+c#+proto

首先是环境配置&#xff0c;用的dotnet5.0的sdk&#xff0c;所以Vscode的C#插件版本要选择1.24&#xff0c;然后需要配置C# Snippets、NuGget Package Manager、vscode-proto3、vscode-solution-extension&#xff08;可选&#xff09;。 以vscode-solution-extension为例新建A…

【大数据之Hive】二十四、HQL语法优化之任务并行度

1 优化说明 Hive的计算任务由MapReduce完成&#xff0c;并行度调整分为Map端和Reduce端。 1.1 Map端并行度 Map端的并行度及Map的个数&#xff0c;由输入文件的切片数决定&#xff0c;一般情况下Map端并行度不需要手动调整。   在特殊情况下&#xff08;查询的表中存在大量小…

大数据学习03-Hive分布式集群部部署

系统环境&#xff1a;centos7 软件版本&#xff1a;jdk1.8、zookeeper3.4.8、hadoop2.8.5、hive1.1.0 一、下载安装 下载hive安装包&#xff0c;上传到linux服务器上&#xff0c; 解压安装包 tar -zxvf apache-hive-1.1.0-bin.tar.gz -C /home/local/重命名文件 mv apache-…

手机VPN的连接方法分享

1、首先在手机屏幕左右的滑动,找到手机的设置图标。 2、在打开的小米手机设置页面中点击“更多连接方式”的菜单项。 3、然后在打开的更多连接方式页面中点击VPN的菜单项。 4、在打开的VPN设置页面中点击“添加VPN”的按钮。 5、在打开的添加VPN的页面中输入VPN的信息后点击右…

Element-UI 实现动态增加多个不同类型的输入框并校验(双重v-for表单验证)

文章目录 前言定义表单格式表单渲染和验证扩展 前言 在做复杂的动态表单&#xff0c;实现业务动态变动&#xff0c;比如有一条需要动态添加的el-form-item中包含了多个输入框&#xff0c;并实现表单验证&#xff0c;但在element-ui组件库中给出的表单校验中没有这样的格式&…

简析三相电能预付费控制系统的设计与产品选型

摘要&#xff1a;介绍了一种电能预付费系统&#xff0c;主要用于三相动力用户。采用预付费控制器终端和电能表分离的方式&#xff0c;从原有电表读取相关数据用于比较&#xff0c;在尽量少改动原有接线的情况下安装预付费控制系统。采用安全性和稳定性高的RFID卡&#xff0c;数…

真正的理解WPF中的TemplatedParent

童鞋们在WPF中经常看到 TemplatedParent ,或者经常看到下面的用法: {Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content} 是不是看的一脸蒙圈? 先看官方文档: 意思是 和这个控件的 模板上的 父亲,如果这个控件不是模板创建的,那么这个值就…

Servlet 会话跟踪基础

文章目录 前言Cookie实例Cookie缺点Cookie案例代码 SessionSession的创建与销毁Session的创建Session的销毁 Session和Cookie的区别不同联系 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 在Web应用程序中&#xff0c;会话跟踪是一种技术&#xff0c;…

vue+element-ui通用后台管理系统(适合新手)

vueelement-ui通用后台管理系统&#xff08;适合新手&#xff09; 1、使用到的技术 使用vue2element-uiaxiosjs-cookielessecharts实现的一个简易的通用后台管理系统&#xff0c;具有很强的可扩展性&#xff0c;修改简单&#xff0c;只要有点前端基础就能看懂&#xff1b; 2…

汇编 -20230718

一. 练习&#xff1a; 1. 1-100的和 .text .globl _start_start:mov r0, #0 存放结果mov r1, #0 存放当前数mov r2, #100 结束条件的数addFun:add r1, r1, #1add r0, r0, r1cmp r1, r2bne addFunstop:b stop.end结果展示&#xff1a;

将DAST集成到CI/CD管道中的优势和实施步骤

在当今快速发展的网络环境中&#xff0c;维护Web应用程序的安全更加必要。由于漏洞的出现速度比以往任何时候都要快&#xff0c;将动态应用程序安全测试&#xff08;DAST&#xff09;集成到持续集成/持续部署&#xff08;CI/CD&#xff09;管道中成为改变游戏规则的因素&#x…

uni-app:单位像素rpx

rpx:响应式单位&#xff0c;长宽可以随着屏幕大小改变&#xff0c;其尺寸根据iPhone 6的标准来参考&#xff08;750rpx为占满屏幕宽&#xff0c;1334rpx为占满屏幕长。7501334rpx&#xff09; 例子&#xff1a; 现在展示型号为iPhone 12 pro的型号&#xff0c;这里750px和750…