Vue3.0来了！

早上刷微博，看到evanyou（尤雨熙）宣布Vue3.0正式进入Beta。找到了4月16日Vue团队发布的官方公告视频：GlobalVueMeetupfeaturingEvanYou&ThorstenLünborg，感兴趣的朋友可以去看看。Vue3.0即将给开发者带来的是一个更快、更小、更易维护、更方便使用的Vue版本。同时，Vue也没有放弃其“渐进”的理念。您仍然可以使用Vue传递脚本标签，并且2.x版本的代码将继续像以前一样健康地工作。Beta版本的发布表明，官方团队此前规划的新功能已经全部开发完毕，接下来的工作将致力于框架的整体稳定性和新版本周边库的适配。CompositionAPI在Vue的所有更新中，最引起我注意的是那些“拆解的API”。他们没有涉及任何新概念。)暴露给开发者，可以用来替代组件经典的对象式写法（OptionsAPI）。在Vue2.x版本中，组件的组织是基于对象的，即基于对象的OptionsAPI。随着Vue的应用越来越广泛，这种框架模式也遇到了本质的瓶颈。当开发者的组件越来越大，一不小心就会变得丑陋，涉及到的逻辑处理也会变得非常臃肿。这时候开发者就不能按照业务功能对这些代码进行分类整理了，因为在OptionsAPI的设计之初，认为这样的业务代码应该合理的放在options(data,computed,props,methods,生命周期钩子）的组件，所以组件越大，代码的可读性就越差。其次，大型项目中某些逻辑的复用变得困难，目前的mixin等解决方案并没有很好地解决这些问题。因此，Vue3决定使用CompositionAPI来达到一石二鸟的效果。RewriteResponsive在Vue2.x中，Vue使用Object.defineProperty转换对象属性的getter/setter来实现响应式。对于数组，额外拦截常用的数组方法，拦截数组元素的变化。但这确实会带来一些问题，比如无法感知直接通过索引更新数组的场景。Vue3中使用ES6的Proxy重写响应式实现，其功能API直接暴露给开发者。也就是说，开发者甚至可以将Vue的responsive作为一个独立的库来使用。import{reactive}from'vue'conststate=reactive({count:0})state.count++//触发相应的view更新//注意：Vue3的reactivekey方法是reactive和ref，前者可以用于所有types变量，后者专门用于基本类型的变量响应性（string/number/boolean/null/undefined/symbol）支持Tree-shakingTree-shaking是rollup最早提出的build-time优化方案，Webpack4还支持这个特性，指的是在打包构建过程中去除JavaScript上下文中未被引用的代码（死代码）。这个特性依赖于ES6模块系统的静态结构特性，简单来说就是导入导出。随着Vue的不断增长，它的体积也变大了（打包时也变大了）。Vue3通过调整源码结构，让更多特性支持Tree-shaking(v-model,)，为官方团队解决了这个尴尬的困境。比如官方用Vue3实现的HelloWorlddemo，大小只有13.5kb。如果只支持CompositionAPI，大小会继续缩减到11.75kb；涵盖所有功能的软件包只有22.5kb大小。简而言之，与Vue2.x相比，Vue3可谓功能更多，但仍然更轻。自己偷懒的东西比较多，加上文章太长引起不适（主要是自己偷懒），Vue3的新东西很多，我就不一一赘述了。与Vue2.x不同的是，Vue3的源代码全部由TypeScript重写。Vue3重写了虚拟dom的实现。组件的初始化会变得更加高效，视图更新的效率也会比之前提升1.3到2倍。Fragment支持单个组件中的多个根节点Teleport传输组件（以前称为Portal，因为GoogleChrome团队正在研究一种名为portal的原生元素，所以为了避免一些不必要的问题，干脆更名为Suspense组件，类似于React。悬念让我们坐等。简而言之，Vue3对我来说更像是React，从基于对象过渡到基于函数。虽然写惯了Vue2.x，但是说Vue3的第一印象有点难以接受（举个栗子：用setup代替beforeCreate和created，在这个入口函数里面，连访问都访问不了this!)，但多看几眼就没那么别扭了，尤其是CompositionAPI越看越喜欢，它提供了更灵活的编码空间，开发者也可以更有目的性、更合理地组织自己的代码.目前Vue3还有一些收尾工作，比如文档、迁移工具/指导、周边库的适配（vue-router、vuex）、vue-cli、devtools，相信在不久的将来，大家也可以分享和我在一起就是真香的意思。