前端下午茶@3.0 正式进入 Beta，尤雨溪说了这些，开发者们大呼真香，Vue 早上刷微博看到evanyou(尤雨溪)宣布Vue

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

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

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

文章图片
于是， 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 。

文章图片
总之，和Vue2.x作对比， Vue3可谓是Morefeaturesbutstilllighter 。