江苏龙网

  1. 首页 > 人文 > >

Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香

早上刷微博看到evanyou(尤雨溪)宣布Vue3.0正式进入Beta[1] ， 顺藤摸瓜找到了Vue团队于4月16号发布的官宣视频：GlobalVueMeetupfeaturingEvanYou&ThorstenLünborg[2] ， 感兴趣的小伙伴可以去看看 。
Vue3.0即将为开发者们带来的是一个更快、更小、更易维护以及更方便使用的Vue版本 ， 与此同时 ， Vue并没有抛弃其“渐进式”的概念 ， 你仍然可以通过script标签使用Vue ， 以及2.x版本的代码也会一如既往健康地继续工作着 。
Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香
文章图片

Beta版本的发布说明官方团队先前所规划的新特性已经全部完成开发 ， 接下来的工作将会致力于框架的整体稳定性和周边库的新版本适配 。
Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香
文章图片

CompositionAPI在所有Vue的更新中 ， 最引起我注意的就是那些“拆出来的API” ， 它们并没有涉及什么新的概念 ， 本质上就是将Vue的一些核心功能（诸如创建组件、观察响应式状态）暴露给了开发者 ， 可以用来代替组件经典的对象式写法（OptionsAPI） 。
在Vue2.x版本中 ， 组件的组织方式是基于对象的 ， 即object-basedOptionsAPI ， 随着Vue的使用越来越广泛 ， 这种框架模式也遇到了本质上的瓶颈 。 当开发者的组件越来越大 ， 稍有不慎就会变的很丑 ， 其中涉及的逻辑处理也会变得很臃肿 ， 这个时候开发者是无法将这些代码按照业务功能分类组织的 ， 因为OptionsAPI在设计之初就认为此类业务代码应当被合理的分置在组件的各项Options（data、computed、props、methods、生命周期钩子）中 ， 所以组件越大 ， 代码的可读性就越差 。 其次 ， 在大型的项目中重用某些逻辑变得有些困难 ， 目前的解决方案比如mixins ， 并不能很好的解决这些问题 。
Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香
文章图片

于是 ， Vue3决定用CompositionAPI[3]达到一箭双雕的效果 。
重写响应式在Vue2.x中 ， Vue通过Object.defineProperty转化对象属性getters/setters的方法来实现响应式 ， 对于数组来说额外对常用的数组方法进行来拦截才能截获到数组元素的变动 ， 但这确实也造成了一些问题 ， 比如无法感知直接通过索引来更新数组的场景 。
在Vue3中 ， 用ES6的Proxy[4]重写了响应式的实现 ， 并将其功能API直接暴露给开发者 ， 换言之 ， 开发者甚至可以将Vue的响应式作为一个独立的库来使用 。
import{reactive}from'vue'conststate=reactive({count:0})state.count++//触发相应的视图更新//注：Vue3的响应式关键方法有reactive和ref ， 前者可用于所有类型的变量 ， 而后者专门用于基本类型的变量响应式化(string/number/boolean/null/undefined/symbol)支持Tree-shakingTree-shaking是rollup最早提出的构建时优化方案 ， Webpack4[5]也支持的了这一项特性 ， 指在打包构建的过程中移除JavaScrtipt上下文中未引用的代码（deadcode） 。 这个功能依赖于ES6模块系统的静态结构特性[6] ， 说白了就是import和export 。
由于Vue的不断成长 ， 其体积也变得越来越大（打包后也很大） 。 Vue3通过对源码结构的调整 ， 让更多的特性实现了对Tree-shaking的支持（v-model、） ， 解决了这一让官方团队尴尬的窘境 。 比如用Vue3实现的官方HelloWorlddemo体积只有13.5kb ， 如果只支持CompositionAPI的话 ， 体积会继续减小到11.75kb；涵盖所有功能的包体积仅为22.5kb 。
Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香
文章图片

总之 ， 和Vue2.x作对比 ， Vue3可谓是Morefeaturesbutstilllighter 。
还有更多【Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香】我懒 ， 再加上文章太长会引起不适（主要是我懒） ， Vue3中还有很多新东西我就不一一赘述了 。
不同于Vue2.x ， Vue3的源码全部由TypeScript重写Vue3重写了virtualdom的实现 ， 组件的初始化会变的更加高效 ， 视图更新的效率也比以前提升了1.3～2倍Fragment支持单组件内的多个根节点Teleport传送组件（之前叫Portal ， 因为和谷歌浏览器团队正在搞一个叫portal的原生元素 ， 所以为了避免一些不必要的问题 ， 干脆改名了）Suspense组件 ， 类似于React.Suspense让我们坐等真香总之Vue3给我的感受是更像React了 ， 由object-based过渡到了function-based ， 虽然写惯了Vue2.x的我表示Vue3的第一印象有些难以接受（举个栗子：用setup代替了beforeCreate和created ， 在这个入口函数中 ， 甚至不能访问this!） ， 但在多看了两眼后也没有那么别扭了 ， 尤其是CompositionAPI越看越喜欢 ， 提供了更加灵活的编码空间 ， 开发者也可以更加有目的地合理组织自己的代码 。
目前Vue3剩下了一些收尾的工作 ， 比如文档、迁移工具/指引、周边库的适配（vue-router、vuex）、vue-cli、devtools ， 相信在不远的未来 ， 你也可以和我一起表示真香 。
Vue 3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香
文章图片

参考资料[1]Beta:https://github.com/vuejs/vue-next#status-beta
[2]GlobalVueMeetupfeaturingEvanYou&ThorstenLünborg:https://www.youtube.com/watch?v=Nk3cC7xNfkk
[3]CompositionAPI:https://vue-composition-api-rfc.netlify.app/
[4]Proxy:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
[5]Webpack4:https://www.webpackjs.com/guides/tree-shaking/
[6]静态结构特性:https://exploringjs.com/es6/ch_modules.html#static-module-structure


    推荐阅读


    上一篇：「hpv疫苗」国产HPV疫苗来了！下月起可预约接种

    下一篇：#天气#今天北京大风“落幕”天气晴好 28日开始最高气温飞升至30℃