Vue 3.0 来了！

最新推荐文章于 2024-05-05 21:29:47 发布

qq_36696468

最新推荐文章于 2024-05-05 21:29:47 发布

阅读量328

点赞数

文章标签： vue html java 编程语言 javascript

“
早上刷微博看到 evanyou(尤雨溪) 宣布 Vue 3.0 正式进入 Beta^[1]，顺藤摸瓜找到了 Vue 团队于 4 月 16 号发布的官宣视频：Global Vue Meetup featuring Evan You & Thorsten Lünborg^[2]，感兴趣的小伙伴可以去看看。

Vue 3.0 即将为开发者们带来的是一个更快、更小、更易维护以及更方便使用的 Vue 版本，与此同时，Vue 并没有抛弃其“渐进式”的概念，你仍然可以通过 script 标签使用 Vue，以及 2.x 版本的代码也会一如既往健康地继续工作着。

Beta 版本的发布说明官方团队先前所规划的新特性已经全部完成开发，接下来的工作将会致力于框架的整体稳定性和周边库的新版本适配。

Composition API

“
在所有 Vue 的更新中，最引起我注意的就是那些“拆出来的 API”，它们并没有涉及什么新的概念，本质上就是将 Vue 的一些核心功能（诸如创建组件、观察响应式状态）暴露给了开发者，可以用来代替组件经典的对象式写法（Options API）。

在 Vue 2.x 版本中，组件的组织方式是基于对象的，即 object-based Options API，随着 Vue 的使用越来越广泛，这种框架模式也遇到了本质上的瓶颈。当开发者的组件越来越大，稍有不慎就会变的很丑，其中涉及的逻辑处理也会变得很臃肿，这个时候开发者是无法将这些代码按照业务功能分类组织的，因为 Options API 在设计之初就认为此类业务代码应当被合理的分置在组件的各项 Options（data、computed、props、methods、生命周期钩子）中，所以组件越大，代码的可读性就越差。其次，在大型的项目中重用某些逻辑变得有些困难，目前的解决方案比如 mixins，并不能很好的解决这些问题。

于是，Vue 3 决定用 Composition API^[3] 达到一箭双雕的效果。

重写响应式

在 Vue 2.x 中， Vue 通过 Object.defineProperty 转化对象属性 getters/setters 的方法来实现响应式，对于数组来说额外对常用的数组方法进行来拦截才能截获到数组元素的变动，但这确实也造成了一些问题，比如无法感知直接通过索引来更新数组的场景。

在 Vue 3 中，用 ES6 的 Proxy^[4] 重写了响应式的实现，并将其功能 API 直接暴露给开发者，换言之，开发者甚至可以将 Vue 的响应式作为一个独立的库来使用。

import { reactive } from 'vue'
const state = reactive({ count: 0 })

state.count++
// 触发相应的视图更新

// 注：Vue 3 的响应式关键方法有 reactive 和 ref，前者可用于所有类型的变量，而后者专门用于基本类型的变量响应式化(string/number/boolean/null/undefined/symbol)

支持 Tree-shaking

Tree-shaking 是 rollup 最早提出的构建时优化方案，Webpack 4^[5] 也支持的了这一项特性，指在打包构建的过程中移除 JavaScrtipt 上下文中未引用的代码（dead code）。这个功能依赖于 ES6 模块系统的静态结构特性^[6]，说白了就是 import 和 export。

由于 Vue 的不断成长，其体积也变得越来越大（打包后也很大）。Vue 3 通过对源码结构的调整，让更多的特性实现了对 Tree-shaking 的支持（v-model、<transition>），解决了这一让官方团队尴尬的窘境。比如用 Vue 3 实现的官方 HelloWorld demo 体积只有 13.5kb，如果只支持 Composition API 的话，体积会继续减小到 11.75kb；涵盖所有功能的包体积仅为 22.5kb。

总之，和 Vue 2.x 作对比，Vue 3 可谓是 More features but still lighter。

还有更多

我懒，再加上文章太长会引起不适（主要是我懒），Vue 3 中还有很多新东西我就不一一赘述了。

不同于 Vue 2.x，Vue 3 的源码全部由 TypeScript 重写
Vue 3 重写了 virtual dom 的实现，组件的初始化会变的更加高效，视图更新的效率也比以前提升了 1.3 ～ 2 倍
Fragment 支持单组件内的多个根节点
Teleport 传送组件（之前叫 Portal，因为和谷歌浏览器团队正在搞一个叫 portal 的原生元素，所以为了避免一些不必要的问题，干脆改名了）
Suspense 组件，类似于 React.Suspense

让我们坐等真香

总之 Vue 3 给我的感受是更像 React 了，由 object-based 过渡到了 function-based，虽然写惯了 Vue 2.x 的我表示 Vue 3 的第一印象有些难以接受（举个栗子：用 setup 代替了 beforeCreate 和 created，在这个入口函数中，甚至不能访问 this!），但在多看了两眼后也没有那么别扭了，尤其是 Composition API 越看越喜欢，提供了更加灵活的编码空间，开发者也可以更加有目的地合理组织自己的代码。

目前 Vue 3 剩下了一些收尾的工作，比如文档、迁移工具/指引、周边库的适配（vue-router、vuex）、vue-cli、devtools，相信在不远的未来，你也可以和我一起表示真香。