Vue3.0来了,一起来看看尤大大说了啥

说在前面

前端的技术一直更新特别快,特别是框架这块。4月21晚,Vue作者尤雨溪在B站直播分享了Vue.js 3.0 Beta最新进展。赶紧拿出小本本做笔记,一起来看看尤大大说了些什么。

  1. Performance

当我们项目功能越来越多、模块规模一步步扩大,这个时候性能考量是非常重要的,那么Vue.js 3.0 Beta在性能上给我们带来了哪些惊喜呢?

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

看图说话(以下是性能对比):

需要重点说明的是:

1. 编译模板的优化

见上图:如果我想编译左侧代码,将会被编译成右侧所示

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

Vue在运行时会生成number(大于0)值的PatchFlag,用作标记。

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

2. 事件监听缓存:cacheHandlers

假如我们要绑定一个事件,如上图左侧所示

关闭  cacheHandlers 时:

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

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"])
  ]))
}

开启 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],会自动生成并缓存一个内联函数,“神奇”的变为一个静态节点。 (相当于ReactuseCallback自动化)

2.Tree shaking support

最近React的Hooks火的一塌糊涂,不要担心,Vue也出了

1. 可与现有的 Options API一起使用

2. 灵活的逻辑组合与复用

3.vue 3的响应式模块可以和其他框架搭配使用

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

3. Fragments

Fragments就是碎片

1. 不再限于模板中的单个根节点

2. render 函数也可以返回数组了,类似实现了 React.Fragments 的功能 。

3. 'Just works'

4. 更好的Typescript支持

1. Vue 3是用 TypeScript 编写的库(这一点很多同学没想到吧~),可以享受到自动的类型定义提示

2.  JavaScriptTypeScript中的API是相同的(代码也基本相同)

3. 支持TSX

4. class组件还会继续支持,但是需要引入vue-class-component@next,该模块目前还处在 alpha 阶段。

还有Vue 3 + TypeScript 插件正在开发,有类型检查,自动补全等功能,未来可期。

5.  Custom Renderer API

1.  正在进行NativeScript Vue集成

2.  用户可以尝试WebGL自定义渲染器,与普通Vue应用程序一起使用(Vugel

意味着以后可以通过 vue, Dom 编程的方式来进行 webgl 编程,是不是很Nice~

6. 剩余工作

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读