尤雨溪在直播中讲到的Vue3.0 Beta的那些特性,快记笔记了

 

前言

在那天风雨交加的夜晚,Vue的创做者尤雨溪尤大大在b站直播分享了Vue.js 3.0 Beta最新进展.我对直播的内容进行了一下整理.整整用了三天的空余时间遇上了

1. 全新文档RFCs

 

 

Vue.js 3.0 Beta发布后的工做重点是保证稳定性和推动各种库集成

全部的进度和文档都将在全新RFCs文档能够看到。

2. 六大亮点

 

 

• Performance：性能更比Vue 2.0强。

• Tree shaking support：能够将无用模块“剪辑”，仅打包须要的。

• Composition API：组合API

• Fragment, Teleport, Suspense：“碎片”，Teleport即Protal传送门，“悬念”

• 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：至关于React中useCallback自动化。

而且支持手写内联函数：

<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或hooks
 DYNAMIC_SLOTS = 1 << 10, // 表示具备动态插槽的元素
 // 特殊 FLAGS -------------------------------------------------------------
 HOISTED = -1, // 特殊标志是负整数表示永远不会用做diff,只需检查 patchFlag === FLAG.
 BAIL = -2 // 一个特殊的标志，指代差别算法（没懂）
}
复制代码

感兴趣的能够看源码：packages/shared/src/patchFlags.ts

4. Tree shaking support

 

 

 

• 能够将无用模块“剪辑”，仅打包须要的（好比v-model,，用不到就不会打包）。

• 一个简单“

  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 ``

 

 

• 之前称为``，译做传送门。

• 更多细节将由@Linusborg 分享

`原先是对标React Portal`（增长多个新功能，更强）

但由于Chrome有个提案，会增长一个名为Portal的原生element，为避免命名冲突，改成Teleport

6.2 ``

 

 

Suspense翻译为：“悬念”

• 可在嵌套层级中等待嵌套的异步依赖项

• 支持async setup()

• 支持异步组件

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

Vue 3 的``更加轻量：

仅5%应用能感知运行时的调度差别，综合考虑下，Vue3 的`` 没和React同样作运行调度处理

7. 更好的TypeScript支持

 

 

• Vue 3是用TypeScript编写的库，能够享受到自动的类型定义提示

• JavaScript

  和

  TypeScript

  中的API是相同的。

  • 事实上，代码也基本相同

• 支持TSX

• class组件还会继续支持，可是须要引入vue-class-component@next，该模块目前还处在 alpha 阶段。

还有Vue 3 + TypeScript 插件正在开发，有类型检查，自动补全等功能。目前进展可喜。

 

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

 

 

• 正在进行NativeScript Vue集成

• 用户能够尝试WebGL自定义渲染器，与普通Vue应用程序一块儿使用（Vugel）。

意味着之后能够经过 vue， Dom 编程的方式来进行 webgl 编程 。感兴趣能够看这里：Getting started vugel

9. 剩余工做

 

 

9.1 Docs & Migration Guides

 

 

• 新的文档编写交由@NataliaTepluhina, @sdras, @bencodezen & @phanan 负责

• @sdras 正在作自动升级迁移工具

• @sodatea 已经开始研究CodeMods

9.2 Router

 

 

• 下一代 Router：vue-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虽好，若是你的项目很稳定，且对新功能无过多的要求或者迁移成本太高，则不建议升级。

更多前端学习内容文章干货请关注个人专栏(不断更新)

阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶

在这里我给你们准备了不少的学习资料:

其实你与阿里工程师的差距只差这些东西

结束

若有错误，尽情谅解。若是以为还能够,你们能够给个关注