Vue3.0 Beta直播里聊到了些什么

2020-07-16  本文已影响0人  liwuwuzhi

前言

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

image

1. 全新文档RFCs

image

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

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

2. 六大亮点

image

下面将按顺序分别描述。

3.Performance

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

下面是各项性能对比

image

要点 1：编译模板的优化

image

假设要编译以下代码

<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，用作标记。

image

仅带有PatchFlag标记的节点会被真正追踪，且无论层级嵌套多深，它的动态节点都直接与Block根节点绑定，无需再去遍历静态节点

再看以下例子：

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

image

假设我们要绑定一个事件：


<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枚举定义，我们可以看到分别定义了以下的追踪标记：

image

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

4. Tree shaking support

image

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

5. Composition API

image

与React Hooks 类似的东西，实现方式不同。

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

感兴趣的可以查看：https://composition-api.vuejs.org/#summary

image

Composition API包含了六个主要API

可以到这里查看：https://composition-api.vuejs.org/api.html#setup

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

6. Fragment

image

Fragment翻译为：“碎片”

6.1 <Teleport>

image

<Teleport>原先是对标 React Portal（增加多个新功能，更强）

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

6.2 <Suspense>

image

Suspense翻译为：“悬念”

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

Vue 3 的<Suspense>更加轻量：

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

7. 更好的TypeScript支持

image

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

image

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

image

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

9. 剩余工作

image

9.1 Docs & Migration Guides

image

9.2 Router

image

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

9.3 Vuex

image

`

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

9.4 CLI

image

9.5 新工具：vite（法语 “快”）

image

地址：https://github.com/vuejs/vite

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

9.6 vue-test-utils

image

9.7 DevTools

image

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

9.8 IDE Support (Vetur)

image

9.9 Nuxt

image

目前Nuxt的整合工作也正在进行中，内部团队已经跑起来了。还需要时间磨合

10 Vue 2.x还有 2.7 版本

image

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

结束

附：直播中用到的渲染模板查看工具地址：https://vue-next-template-explorer.netlify.app/

image

后记

大概在8月份会出vue3.0 正式版，所以抽空看了些 3.0 的新特性。
vue-next 的函数式 api，虽说学习成本高一些，但是确实在编程中给了更大的空间。
生涩的查看着官方的英文文档，终于看到这遍比较全面的概括，便记录下来，仅作学习。

转载至 抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些…

上一篇下一篇

猜你喜欢

热点阅读