Vue.js 3.0 新特性预览

总结起来,Vue 3 以下方面值得我们期待 :

  • 更快
  • 更小
  • 更易于维护
  • 更多的原生支持
  • 更易于开发使用

完整的PPT:docs.google.com/presentatio…

Evan 和 Vue 团队的目标是尽可能顺利地过渡到 Vue 3 ,在这个过程中,这些变化在无形地改善了框架。

让 Vue 更快

虽然 Vue 已经非常快了,但 Evan 认为 Vue 3 会更快。如何做到呢…

重写虚拟DOM (Virtual DOM Rewrite)

随着虚拟 DOM 重写,我们可以期待更多的 编译时(compile-time)提示来减少 运行时(runtime)开销。重写将包括更有效的代码来创建虚拟节点。

优化插槽生成(Optimized Slots Generation)

在当前的 Vue 版本中,当父组件重新渲染时,其子组件也必须重新渲染。 使用 Vue 3 ,可以单独重新渲染父组件和子组件。

静态树提升(Static Tree Hoisting)

使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态组件,然后将其提升,从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。

静态属性提升(Static Props Hoisting)

此外,我们可以期待静态属性提升,其中 Vue 3 将跳过不会改变节点的打补丁过程。

基于 Proxy 的观察者机制

目前,Vue 的反应系统是使用 ObectDefineProperty 的 getter 和 setter。 但是,Vue 3 将使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告,使速度加倍,并节省了一半的内存开销。

为了继续支持 IE11,Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。

使 Vue 更小

Vue已经非常小了,在运行时(runtime)压缩后大约 20kb 。 但我们可以期待它会变得更加小,新的核心运行时压缩后大概 10kb 。 这将在很大程度上通过消除不使用的库(也称为Tree Shaking)来实现。 例如,如果您没有使用 过渡(transition)元素,则不会包含它。

使其更具可维护性

虽然大多数 Vue 开发人员都没有在库本身上工作,但很高兴知道 Vue 3 将带来更多可维护的源代码。 它不仅会使用 TypeScript ,而且许多软件包将被解耦,使所有内容更加模块化。

更多的原生支持

运行时内核也将与平台无关,使得 Vue 可以更容易地与任何平台(例如Web,iOS或Android)一起使用。

更易于开发使用

Observer 模块已被解压缩到自己的包中,允许您以新的方式使用它:

跟踪重新渲染的位置也会更容易。 在 Evan 的演讲中,他做了一些实时编码,并展示了如何跟踪 Vue 应用程序(使用下面的代码)来找出触发组件重新渲染的内容。 这在更大的应用程序和性能微调中非常有用。

Vue 3.0 还会改进对 TypeScript 的支持,允许在编辑器中进行高级的类型检查和有用的错误和警告。

实验性的 Hooks API

当我们需要在 Vue 中共享两个组件之间的行为时,我们通常使用 Mixins 。然而,Evan 正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题,并且更适合使用惯用的 Vue 代码。

实验性的 Time Slicing 支持

当您有许多组件同时尝试重新渲染时,任何浏览器都可以开始变得很慢,从而使用户体验下降。

Evan展示了他如何尝试使用 Time Slicing,将 JS 的执行分解为几个部分,如果有用户交互需要处理,这些部分将提供给浏览器。

小结

我已经喜欢用Vue进行编码了,我很高兴能看到 Vue 更具竞争力,模块化,更容易调试和更多的开发乐趣。 另外上面说的这些内容除了“明年晚些时候”之外,还没有一个明确的发布日期。

本文参考:https://juejin.im/entry/5bf1f4d2e51d451dca476889?utm_source=gold_browser_extension

原文地址:https://www.cnblogs.com/ljx20180807/p/9987822.html

时间: 2024-10-01 04:17:14

Vue.js 3.0 新特性预览的相关文章

Office 2016 正式发布——新特性预览

今天微软又发生了一件大事!Windows Office 2016正式发布,这标志着Windows Office 又达到了一个新的里程碑! 全新的Office 发布为Office 365 用户带来了新的价值,它不仅与Windows 10完美匹配,并且更加重视商业安全.用户使用这些新功能特性能够更加流畅的工作,不受干扰.随着Windows 2016发布,Mac Office 2016也同期上线. 全新的Office 体验——让团队协作更加便捷高效 全新的Office 让团队协作变得更加轻松便捷,Of

CSS3_新特性预览

一.强大的CSS选择器 以前我们通常用class. ID 或 tagname 来选择HTML元素,CSS3的选择器强大的难以置信.  它们可以减少在标签中的class和ID的数量更方便的维护样式表.更好的实现结构与表现的分离. 二.圆角效果 以前做圆角通常使用背景图片,或繁琐的元素拼凑,现在很简单了 border-radius 帮你轻松搞定.   三.块阴影与文字阴影 可以对任意DIV和文字增加投影效果. 四.新的颜色制式和透明设定 CSS3支持更多的颜色和更广泛的颜色定义.新颜色CSS3支持H

Eova 1.2 正式版 新特性预览

效率决定成本,细节决定成败!Eova不仅仅是快速开发,让你有更多的时间完善细节和业务! Form流式布局:多列显示,视野开阔 前端验证:提升性能,提升体验,保障业务 红色必填项:一目了然输入提示:快速理解字段含义默认值显示:初始显示默认值,减少操作

更轻更快的Vue.js 2.0与其他框架对比(转)

更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 在性能上有显著的提升,同时保持轻量的文件下载: 渲染层基于一个轻量级的Virtual DOM实现进行了重写,该Virtual DOM实现fork自snabbdom.新的渲染层相比v1带来了巨大的性能提升,也让Vue 2.0成为了最快速的框架之一. 根据1.0到2.0迁移指南,“大约90%的API是相

C# 7.0 新特性3: 模式匹配

本文参考Roslyn项目Issue:#206,及Docs:#patterns. 1. C# 7.0 新特性1: 基于Tuple的“多”返回值方法 2. C# 7.0 新特性2: 本地方法 3. C# 7.0 新特性3: 模式匹配 模式匹配也许能算的上C#本次更新最重量级的升级,也是最受关注的特性(也许没有之一),通过模式匹配,我们可以简化大量的条件代码. Switch语句 大家也许遇到过这样的情景,假设你的代码中,有一个Nullable<int>的值,需要对其在正整数,非正整数,Null三种情

基于Three.js的360X180度全景图预览插件

基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1.html 主题 Three.js 简要教程 Photo Sphere Viewer是一款基于Three.js的360X180度全景图预览js插件.该js插件可以360度旋转查看全景图,也可以上下180度查看图片.使用该插件的唯一要求是浏览器支持canvas或WebGL. 查看演示      下载插

js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font

vue 实现图片上传与预览,以及清除图片

vue写原生的上传图片并预览以及清除图片的效果,下面是demo,其中里面有vue获取input框value值的方法以及vue中函数之间的调用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片demo</title> <link rel="stylesheet" href="../../css/font-a

android 7.0 新特性 和对开发者的影响

android 7.0新特性 - jiabailong的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/jiabailong/article/details/52411300 android 7.0对开发者会有哪些影响 - jiabailong的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/jiabailong/article/details/52411353 android 7.0 多窗口及新特性demo - jiabail