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

前言

就在一年前的 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.mzph.cn/news/2060.shtml

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

相关文章

离线安装Elasticsearch7.15.1集群(使用内置jdk)

离线安装Elasticsearch7.15.1集群(使用内置jdk) 背景&#xff1a; 以192.168.50.210、192.168.50.211、192.168.50.212这三台机器为例&#xff0c;进行相关的配置 而我本地的jdk是1.8的&#xff0c;已经不符合要求了。但项目中没有那么高版本的jdk&#xff0c;也只想用1.8版本…

Excel-公式VLOOKUP 使用方法-小记

个人愚见 表示 MongoDB列中的任意一条数据 在 MySQL列 精确查找 和MongoDB列 中一模一样的数据&#xff0c;有的话返回MongoDB列数据&#xff0c;没有话返回#N/A 官方解释

【Web安全】小白怎么快速挖到第一个漏洞,src漏洞挖掘经验分享,绝对干货!

src漏洞挖掘经验分享 – 掌控安全以恒 一、公益src 公益src是一个白帽子提交随机发现的漏洞的品台&#xff0c;我们可以把我们随机发现或者是主动寻找到的漏洞在漏洞盒子进行提交。 在挖掘src的时候不能越红线&#xff0c;一般情况下遇到SQL注入 只获取数据库名字以证明漏洞的…

myAgv的slam算法学习以及动态避障下篇

引言 在之前的一篇文章中有提到购入了一台myAGV&#xff0c;以树莓派4B为控制核心的移动机器人。上篇文章中向大家介绍了myAGV如何实现建图、导航以及静态避障&#xff0c;但我们深知&#xff0c;这只是机器人自主导航能力的基础。在实际应用场景中&#xff0c;机器人需要面对复…

Flask入门:flask run运行入口函数

背景&#xff1a; 这两天在看后端代码覆盖率平台代码的时候&#xff0c;发现启动服务只需要执行flask run命令即可。但是找了半天都没有看到工程中Flask app实例对象是在哪里创建的。工程中定义了一个create_app()函数&#xff0c;可是没有看到调用它的地方。带着疑惑&#xf…

2023牛客暑期多校训练营1

2023牛客暑期多校训练营1 D-Chocolate 题意 ​ 二人博弈&#xff0c;每局给出一个 n m nm nm的巧克力&#xff0c;每次操作可以选择一个点 ( x , y ) (x,y) (x,y)然后拿走所有 ( i ≤ x & & j ≤ y ) (i \leq x \&\&j\leq y) (i≤x&&j≤y)的巧克力…

创建 CephFS 文件系统 MDS 接口(短暂的分别是为了更好的再见)

文章目录 一、Ceph 简介二、Ceph 特点三、创建 CephFS 文件系统 MDS 接口四、 创建 Ceph 块存储系统 RBD 接口五、 创建 Ceph 对象存储系统 RGW 接口1、对象存储概念2、创建 RGW 接口3、将生成的证书合并为pem OSD 故障模拟与恢复1、模拟 OSD 故障2、将坏掉的 osd 踢出集群 一、…

【react】react18的学习(十一)– 底层原理(一)之 diff 算法

diff算法、fiber链表 步骤&#xff1a;&#xff08;追求多复用&#xff0c;快渲染&#xff09; 首次渲染&#xff0c;缓存虚拟dom或fiber链表&#xff08;17及以后&#xff09;&#xff1b; 组件更新&#xff0c;将新生成的虚拟dom与已有的真实dom的fiber链表对比&#xff1b…

【C语言+sqlite3 API接口】实现水果超市

实验内容&#xff1a; 假如我家开了个水果超市&#xff0c;有以下水果&#xff0c;想实现自动化管理&#xff0c;扫描二维码就能知道当前的水果状态&#xff0c;进货几天了&#xff0c; 好久需要再次进货&#xff0c;那些水果畅销&#xff0c;那些水果不畅销&#xff0c;那些水…

selenium查找svg元素

目录 如何为SVG元素编写XPath 使用local-name&#xff08;&#xff09;的语法 需要记住的一点 将“and”与SVG元素一起使用 如何定位嵌套的SVG元素&#xff1f; XPath是一种用于定位XML文档中的web元素的语言&#xff0c;包括构成网页的HTML文档。在Selenium中&#xff0…

学习day48

事件的基本使用&#xff1a; 1.使用v-on&#xff1a;xxx或xxx绑定事件&#xff0c;其中xxx是事件名 2.事件的回调需要配置在methods对象中&#xff0c;最终会在vm上 3.methods中配置的函数&#xff0c;不要用箭头函数&#xff01;否则this就不是vm了 4.methods中配置的函数&…

【计算机视觉】DINOv2(视觉大模型)代码四个不同模型的对比,以 28 * 28 的图像为例(完整的源代码)

文章目录 一、ViT-S/14二、ViT-B/14三、ViT-L/14四、ViT-g/14 一、ViT-S/14 import torch import torchvision.transforms as T import matplotlib.pyplot as plt import numpy as np import matplotlib.image as mpimg from PIL import Image from sklearn.decomposition im…

golang之json注释处理

场景 json 作为现代比较常用的文本格式,本身是不支持注释的,因为它的设计初衷是作为一种轻量级数据交换格式,只需要包含数据本身,而不应该包含注释或者其他无关的信息。 但是有时json内字段较多,想写一些注释说明,这些都是编程工具或者编辑器特有的功能,常见的注释如下…

ES系列--es进阶

一、系统架构 一个运行中的 Elasticsearch 实例称为一个节点&#xff0c;而集群是由一个或者多个拥有相同 cluster.name 配置的节点组成&#xff0c; 它们共同承担数据和负载的压力。当有节点加入集群中或者 从集群中移除节点时&#xff0c;集群将会重新平均分布所有的数据。 …

准备WebUI自动化测试面试?这30个问题你必须掌握(一)

本文共有8600字&#xff0c;包含了前十五个问题&#xff0c;如需要后十五个问题&#xff0c;可查看文末链接~ 1. 什么是WebUI自动化测试&#xff1f; WebUI自动化测试是指使用自动化测试工具和技术来模拟用户在Web用户界面&#xff08;UI&#xff09;上执行操作&#xff0c;并…

动态内存管理(C语言)

动态内存管理 1. 为什么存在动态内存管理2. 动态内存函数的介绍2.1 malloc函数和free函数2.2 calloc函数2.3 realloc函数 3. 常见的动态内存错误3.1 对NULL指针的解引用操作3.2 对动态开辟空间的越界访问3.3 对非动态开辟内存使用free函数3.4 使用free释放动态开辟内存的一部分…

C#窗口程序添加最大最小化

要在C#开发的窗口程序中添加最大化和最小化按钮&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开窗口的设计视图&#xff0c;在窗口的标题栏上找到一个名为"ControlBox"的属性&#xff0c;将其设置为"True"。这将显示窗口的控制按钮&#xff0c;包…

android studio开发app实例

以下是一个简单的Android Studio开发App的实例&#xff1a; 1. 打开Android Studio&#xff0c;并创建一个新项目。 2. 选择一个适当的应用程序名称和包名称&#xff0c;然后选择目标API级别和默认Activity的模板。 3. 在MainActivity.java文件中&#xff0c;添加以下代码以…

git创建本地分支并关联远程分支

创建本地分支 git branch 分支名 例如&#xff1a;git branch dev&#xff0c;这条命令是基于当前分支创建的本地分支&#xff0c;假设当前分支是master(远程分支)&#xff0c;则是基于master分支创建的本地分支dev。 2. 切换到本地分支 git checkout 分支名 例如&#xff1a…

Python爬虫——urllib_ajax的get请求爬取豆瓣电影前十页

ajax&#xff1a; 就是一段js代码&#xff0c;通过这段代码&#xff0c;可以让页面发送异步的请求&#xff0c;或者向服务器发送一个东西&#xff0c;即和服务器进行交互 对于ajax&#xff1a; 一定会有 url&#xff0c;请求方法(get, post)&#xff0c;可能有数据一般使用 j…