尤大在 Vue Toronto 的主题演讲中预览了 Vue 3 。通过利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的Vue.js 的改进版本。
我们期待的 Vue 3 将会是:
-
更快
-
更小
-
更容易维护
-
更加友好
-
更容易使用
虽然 Vue 已经非常快,但尤大认为 Vue 3 会更快。下面几点将是如何去做的:
1. 虚拟DOM重写
虚拟 DOM 从头开始重写,我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。
2. 优化 slots 的生成
目前在 Vue 中,当父组件重新渲染时,其子组件也必须重新渲染。使用Vue 3,可以单独重新渲染父级和子级。
3. 静态树提升(Static Tree Hoisting)
使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲染成本。它将能够跳过 patching 整棵树。
4. 静态属性提升
此外,我们可以期待静态属性提升,其中 Vue 3 将跳过不会改变的 patching 节点。
5. 基于 Proxy 的 Observation
目前,Vue 的响应式系统是使用带有 Object.defineProperty 的getter 和 setter。但是,Vue 3 将使用 ES2015 Proxy 作为其观察机制。这消除了以前存在的警告,使速度加倍,并使用了一半的内存。
Vue 已经非常小了,在运行时压缩了大约 20kb。但我们可以预期它会变得更加紧凑,对于新的核心运行时而言,为 10kb gzi 压缩。这将在很大程度上通过消除您不使用的库(也称为Tree Shaking)来实现。例如,如果您没有使用过渡元素,则不会包含它。
使其更具可维护性
虽然大多数 Vue 开发人员都没有在库本身上工作,但很高兴知道 Vue 3 将带来更可维护的源代码。它不仅会使用 TypeScript,而且许多包将被解耦,使所有内容更加模块化。
更容易与原生结合
运行时核心也将与平台无关,使得Vue可以更容易地与任何平台(例如Web,iOS或Android)一起使用。
让您的生活更轻松
Observer 模块已被解压缩到自己的包中,允许您以新的方式使用它:
跟踪重新渲染的位置也会更容易。在他的演讲中,尤大做了一些实时编码,并展示了如何跟踪 Vue 应用程序(使用下面的代码)来找出触发组件重新渲染的内容。这在更大的应用程序和性能微调中非常有用。
Vue 3.0 还具有改进的 TypeScript 支持,允许在编辑器中进行新级别的类型检查和有用的错误和警告
1. Hooks API
当我们需要在 Vue 中共享两个组件之间的行为时,我们通常使用Mixins。然而尤大正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题,并且更适合使用惯用的 Vue 代码。
2. 时间切片支持
当您有许多组件同时尝试重新渲染时,任何浏览器都可以开始爬行,从而使用户体验变得困难。
尤大展示了他正在尝试使用 Time Slicing,如果要处理用户交互,将 JS 执行分解为可以提供给浏览器的段。
最后说下看法,尤大的愿景很好,基本是就是每个框架、库的愿景,差不多就是奥运精神:更高、更快、更强。