Vue.js 3.0 Beta笔记:尤雨溪直播内容整理

2023-11-30 07:18

本文主要是介绍Vue.js 3.0 Beta笔记:尤雨溪直播内容整理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Vue.js 3.0 Beta

前言

在4月21日晚,Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。 以下是直播内容整理。

Vue.js 作者尤雨溪:聊聊 Vue.js 3.0 Beta:B站录播地址

本文转载自:原文章链接

1. 全新文档RFCs

在这里插入图片描述
Vue.js 3.0 Beta发布后的工作重点是保证稳定性和推进各类库集成

所有的进度和文档都将在全新RFCs文档可以看到。


2. 六大亮点

在这里插入图片描述

  • Performance:性能更比Vue 2.0强。
  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。
  • Composition API:组合API
  • Fragment, Teleport, Suspense:“碎片”,TeleportProtal传送门,“悬念”
  • Better TypeScript support:更优秀的Ts支持
  • Custom Renderer API:暴露了自定义渲染API

下面将按顺序分别描述。

3. Performance

在这里插入图片描述

  1. 重写了虚拟Dom的实现(且保证了兼容性,脱离模版的渲染需求旺盛)。
  2. 编译模板的优化。
  3. 更高效的组件初始化。
  4. update性能提高1.3~2倍。
  5. SSR速度提高了2~3倍。

下面是各项性能对比
在这里插入图片描述

要点1:编译模板的优化

在这里插入图片描述
假设要编译以下代码

<div><span/><span>{{ msg }}</span>
</div>

将会被编译成以下模样:

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {return (_openBlock(), _createBlock("div", null, [_createVNode("span", null, "static"),_createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)]))
}
// Check the console for the AST

注意看第二个_createVNode结尾的“1”:

Vue在运行时会生成number(大于0)值的PatchFlag,用作标记。
在这里插入图片描述
仅带有PatchFlag标记的节点会被真正追踪,且无论层级嵌套多深,它的动态节点都直接与Block根节点绑定,无需再去遍历静态节点

再看以下例子:
在这里插入图片描述

<div><span>static</span><span :id="hello" class="bar">{{ msg }}   </span>
</div>

会被编译成:

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {return (_openBlock(), _createBlock("div", null, [_createVNode("span", null, "static"),_createVNode("span", {id: _ctx.hello,class: "bar"}, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])]))
}

PatchFlag 变成了9 /* TEXT, PROPS */, ["id"]

它会告知我们不光有TEXT变化,还有PROPS变化(id)

这样既跳出了virtual dom性能的瓶颈,又保留了可以手写render的灵活性。等于是:既有react的灵活性,又有基于模板的性能保证。

要点2: 事件监听缓存:cacheHandlers

在这里插入图片描述
假设我们要绑定一个事件:

<div><span @click="onClick">{{msg}}</span>
</div>

关闭cacheHandlers后:

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {return (_openBlock(), _createBlock("div", null, [_createVNode("span", { onClick: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])]))
}

onClick会被视为PROPS动态绑定,后续替换点击事件时需要进行更新。

开启cacheHandlers后:

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {return (_openBlock(), _createBlock("div", null, [_createVNode("span", {onClick: _cache[1] || (_cache[1] = $event => (_ctx.onClick($event)))}, _toDisplayString(_ctx.msg), 1 /* TEXT */)]))
}

cache[1],会自动生成并缓存一个内联函数,“神奇”的变为一个静态节点。Ps:相当于ReactuseCallback自动化。

并且支持手写内联函数:

<div><span @click="()=>foo()">{{msg}}</span>
</div>

补充:PatchFlags枚举定义

而通过查询Ts枚举定义,我们可以看到分别定义了以下的追踪标记:

export const enum PatchFlags {TEXT = 1,// 表示具有动态textContent的元素CLASS = 1 << 1,  // 表示有动态Class的元素STYLE = 1 << 2,  // 表示动态样式(静态如style="color: red",也会提升至动态)PROPS = 1 << 3,  // 表示具有非类/样式动态道具的元素。FULL_PROPS = 1 << 4,  // 表示带有动态键的道具的元素,与上面三种相斥HYDRATE_EVENTS = 1 << 5,  // 表示带有事件监听器的元素STABLE_FRAGMENT = 1 << 6,   // 表示其子顺序不变的片段(没懂)。 KEYED_FRAGMENT = 1 << 7, // 表示带有键控或部分键控子元素的片段。UNKEYED_FRAGMENT = 1 << 8, // 表示带有无key绑定的片段NEED_PATCH = 1 << 9,   // 表示只需要非属性补丁的元素,例如ref或hooksDYNAMIC_SLOTS = 1 << 10,  // 表示具有动态插槽的元素// 特殊 FLAGS -------------------------------------------------------------HOISTED = -1,  // 特殊标志是负整数表示永远不会用作diff,只需检查 patchFlag === FLAG.BAIL = -2 // 一个特殊的标志,指代差异算法(没懂)
}

感兴趣的可以看源码:packages/shared/src/patchFlags.ts


4. Tree shaking support

在这里插入图片描述

  • 可以将无用模块“剪辑”,仅打包需要的(比如v-model,<transition>,用不到就不会打包)。
  • 一个简单“HelloWorld”大小仅为:13.5kb
    • 11.75kb,仅Composition API
  • 包含运行时完整功能:22.5kb
    • 拥有更多的功能,却比Vue 2更迷你。

很多时候,我们并不需要 vue提供的所有功能,在 vue 2 并没有方式排除掉,但是 3.0 都可能做成了按需引入。


5. Composition API

在这里插入图片描述
React Hooks 类似的东西,实现方式不同。

  • 可与现有的 Options API一起使用
  • 灵活的逻辑组合与复用
  • vue 3的响应式模块可以和其他框架搭配使用

混入(mixin) 将不再作为推荐使用, Composition API可以实现更灵活且无副作用的复用代码。

感兴趣的可以查看:composition-api.vuejs.org/#summary
在这里插入图片描述
Composition API包含了六个主要API

可以到这里查看:composition-api.vuejs.org/api.html#se…

Ps:其它的均为常见的工具函数,可先忽略不看。


6. Fragment

在这里插入图片描述
Fragment翻译为:“碎片”

  • 不再限于模板中的单个根节点
  • render 函数也可以返回数组了,类似实现了 React.Fragments 的功能 。
  • Just works

6.1 <Teleport>

在这里插入图片描述

  • 以前称为<Portal>,译作传送门。
  • 更多细节将由@Linusborg 分享

<Teleport>原先是对标 React Portal(增加多个新功能,更强)
但因为Chrome有个提案,会增加一个名为Portal的原生element,为避免命名冲突,改为Teleport

6.2 <Suspense>

在这里插入图片描述)
Suspense翻译为:“悬念”

  • 可在嵌套层级中等待嵌套的异步依赖项
  • 支持async setup()
  • 支持异步组件

虽然React 16引入了Suspense,但直至现在都不太能用。如何将其与异步数据结合,还没完整设计出来。

Vue 3 的<Suspense>更加轻量:

仅5%应用能感知运行时的调度差异,综合考虑下,Vue3 的<Suspense> 没和React一样做运行调度处理


7. 更好的TypeScript支持

在这里插入图片描述

  • Vue 3是用TypeScript编写的库,可以享受到自动的类型定义提示
  • JavaScriptTypeScript中的API是相同的。
    • 事实上,代码也基本相同
  • 支持TSX
  • class组件还会继续支持,但是需要引入vue-class-component@next,该模块目前还处在 alpha 阶段。

还有Vue 3 + TypeScript 插件正在开发,有类型检查,自动补全等功能。目前进展可喜。
在这里插入图片描述

8. Custom Renderer API:自定义渲染器API

在这里插入图片描述

  • 正在进行NativeScript Vue集成
  • 用户可以尝试WebGL自定义渲染器,与普通Vue应用程序一起使用(Vugel)。

意味着以后可以通过 vueDom 编程的方式来进行 webgl 编程 。感兴趣可以看这里:Getting started vugel


9. 剩余工作

在这里插入图片描述

9.1 Docs & Migration Guides

在这里插入图片描述

  • 新的文档编写交由@NataliaTepluhina, @sdras, @bencodezen & @phanan 负责
  • @sdras 正在做自动升级迁移工具
  • @sodatea 已经开始研究CodeMods

9.2 Router

在这里插入图片描述

  • 下一代 Routervue-router@next已在alpha阶段,感谢@posva

有部分的API变动,可到RFC上看。

9.3 Vuex

在这里插入图片描述`

  • 下一代Vuex:,vuex@next(与Vue 3 compat相同的API),已在alpha阶段,感谢@KiaKing
  • 团队正在为下一次迭代试验Vuex API的简化

目前以兼容Vue 3为主,基本上没有API变动,莫慌。

9.4 CLI

在这里插入图片描述

  • CLI插件:vue-cli-plugin-vue-nextby @sodatea
  • (wip)CodeMods支持升级Vue 2应用

9.5 新工具:vite(法语 “快”)

在这里插入图片描述
地址:github.com/vuejs/vite

一个简易的http服务器,无需webpack编译打包,根据请求的Vue文件,直接发回渲染,且支持热更新(非常快)

9.6 vue-test-utils

在这里插入图片描述

  • 下一代test-utils:test-utils@next
    • by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

9.7 DevTools

在这里插入图片描述

  • 早期的原型已经由@Akryum 完成,当我们到beta时,将完全集成。

目前需要花更多精力去完善。

9.8 IDE Support (Vetur)

在这里插入图片描述

  • @znck目前正在试验模板的类型检查
  • @octref将在5月为Vue 3进行Vetur集成

9.9 Nuxt

在这里插入图片描述
目前Nuxt的整合工作也正在进行中,内部团队已经跑起来了。还需要时间磨合

10. Vue 2.x还有2.7版本

在这里插入图片描述

  • 将有最后一个小版本(2.7)
  • Vue 3向后移植兼容的改进(不损坏兼容性前提下)
  • 加上在Vue 3中删除的功能的弃用警告
  • LTS1 18个月。

最后建议:Vue 3虽好,如果你的项目很稳定,且对新功能无过多的要求或者迁移成本过高,则不建议升级。

结束

在这里插入图片描述
附:直播中用到的渲染模板查看工具地址:vue-next-template-explorer.netlify.app/
在这里插入图片描述

彩蛋(护发素)

  • 裕波——提问:
    • 最后最后一个问题,刚才在直播的时候,很多人看到我的头发没有了,小尤的头发非常多,怎么保护好发际线,有没有什么好的护发素?
  • 尤雨溪——回答:
    • 其实,我的头发也不是很多了。这个,啧,也是一个比较困扰的问题,人到中年,我只是带着耳机看着还有点,而且我已经两个多月没理发了,现在这个疫情之下都没办法理发,所以就很尴尬。但是就是,说实话我也头痛这个问题,所以有什么好的护发素给我推荐一下呗!

  • 幽默的程序猿总是擅长自嘲,由此来慰藉自己朴实无华且枯燥的生活。大家可以自己找录播的完整视频看下,hhhh。

这篇关于Vue.js 3.0 Beta笔记:尤雨溪直播内容整理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/436117

相关文章

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

Python变量与数据类型全解析(最新整理)

《Python变量与数据类型全解析(最新整理)》文章介绍Python变量作为数据载体,命名需遵循字母数字下划线规则,不可数字开头,大小写敏感,避免关键字,本文给大家介绍Python变量与数据类型全解析... 目录1、变量变量命名规范python数据类型1、基本数据类型数值类型(Number):布尔类型(bo

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled