Vue 3.0 的新特性

分手后的思念是犯贱 2022-04-14 02:43 176阅读 0赞

尤大在 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 执行分解为可以提供给浏览器的段。

最后说下看法，尤大的愿景很好，基本是就是每个框架、库的愿景，差不多就是奥运精神：更高、更快、更强。

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3新特性多方面总结vue3.0新特性

Compostion api 代替了 Option api ，Compostion API 中时根据逻辑相关组织代码的，提高可读性和可维护性性能比Vue2.x快1.2~2...

太过爱你忘了你带给我的痛/ 2024年04月24日 21:01/ 0 赞/ 13 阅读

相关 Vue3新特性

-------------------- 文章目录一新特性之组合API 1.1 ref&reactive 1.2 methods

梦里梦外;/ 2024年03月30日 15:46/ 0 赞/ 21 阅读

相关 Vue3新特性组合式Api

setup - 组件内使用 Composition API 的入口点 > setup 作为组合式 API 的入口点，也就是说，组合式 API 都必须只能在 setup 中

桃扇骨/ 2022年12月15日 03:41/ 0 赞/ 109 阅读

相关 vue3 新特性

破解 vue3.x 新特性视频地址 https://www.bilibili.com/video/av69262619/ 0. 基础要求 1. 了解常见

我不是女神ヾ/ 2022年11月29日 05:47/ 0 赞/ 151 阅读

相关 vue3新特性和新用法

下面是关于vue3的一些新特性和新用法的讲解一、新增内置组件：teleport 官文解释teleport：teleport 提供了一种干净的方法，允许我们控制在 DOM

Dear 丶/ 2022年11月15日 11:49/ 0 赞/ 419 阅读

相关 Vue3新特性盘点简介

Vue3支持vue2的大多数特性，你可以像使用vue2一样原封不动的使用vue3 Vue3官方网站 [https://v3.vuejs.org/][https_v3.vuej

痛定思痛。/ 2022年10月29日 06:27/ 0 赞/ 110 阅读

相关 Vue 3.0 新特性

Vue 3.0 新特性 [Vue 3.0 新特性及使用方法 - 简书][Vue 3.0 _ -] 介绍 2020年9月19日凌晨，尤雨溪大大正式发布了 Vue.js

绝地灬酷狼/ 2022年09月17日 06:17/ 0 赞/ 163 阅读

相关 30分钟了解C++11新特性

http://developer.51cto.com/art/201312/422379.htm 什么是C++11 C++11是曾经被叫做C++0x，是对目

曾经终败给现在/ 2022年07月16日 08:38/ 0 赞/ 160 阅读

相关 Vue 3.0 的新特性

尤大在 Vue Toronto 的主题演讲中预览了 Vue 3 。通过利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的Vue.js 的改进版本。我们期待的

分手后的思念是犯贱/ 2022年04月14日 02:43/ 0 赞/ 177 阅读

相关 30 分钟精通 React 新特性React Hooks

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。你还

你的名字/ 2021年12月23日 15:33/ 0 赞/ 264 阅读