尤雨溪谈Vue3.0新特性直播后的个人理解

我个人对Vue3的体验感受是非常好的，RFC讨论新API(Composition得通过需要少量的API的学习成本，或许可以得到更好的体验。再此我是保持中立的，框架的更新改版我的理解就是：解决前代被人吐槽的地方，优化性能，缩小体积，更强大的功能。在此之前，通过这次直播，我来总结下Composition API 和Options API之间究竟解决了什么问题

按需引入

按照大佬的说法，Vue CompositionAPI支持按需引入，众所周知在Vue2 Options API中，它将其所有的功能都融会贯通起来，通过官方的Vue3在线编译器。可以看出，在Vue3中，会动态的去对模板引擎做一个按需引入。如原始模板：

<div>
  <span>hello, vue 3</span>
</div>
复制代码

转换后:

import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", null, "hello, vue 3")
  ]))
}

// Check the console for the AST
复制代码

可以看到， import 中导入了模板引擎基本的东西

createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock
复制代码

在直播中也是提到了这一点。附上最新的模板编译网站：vue-next-template-explorer.netlify.app，大大的优化了项目打包后的一些代码。

更好的TypeScript支持

在2019年 ~ 2020年中，大量的库使用TS重构，代表的有，AntV G6 & Vue。重构后性能都有显著的提升和好的类型支持，无疑是一个好的方向，同时Npm也被微软收购，以为微软体系下就有Github， Npm，Typescript等热门的前端体系，所以2020年如果没有学习TS的朋友可以动身了。不然，如同jQuery一样，可能会成为时代的弄潮。

JavaScript不会被typeScript替换，但是开发者可能会。

Fragment碎片

在React中，有一个React.Fragments，起作用就是说在一个组件返回多个元素，意味着组件下根节点不只一个。但是在Vue2中template 和 render都需要一个根节点，不然会提示报错，很多时候不得不去多套一层。在Vue3中，尤大提到了Fragment碎片化，意味着template也支持多个节点。而不在是单一树了。

CompositionAPI & Mixin

Mixin在Vue中，我使用的场景很少，不是说没用。而是我很少去用它，虽然它看起来非常的优雅可以减少很多代码。但它确实有一个非常不友好的地方就是。我不清楚该页面中变量到底混入了什么。虽然它是可控的。而尤大昨天也提到了这个问题。所以我对Vue3充满了期待。

逻辑拆分和属性拆分

尤大提到了一个很重要的概念，setup逻辑拆分。在Vue2中，我们写的组件有时候会很长，不是不想拆分，而是不因为代码长而拆分。它就是一两个简单的业务逻辑。但是这个逻辑很长，有很多的methods, computd， data，生命周期。大家都有体会到，我的鼠标已经脱色了。一个逻辑看起来非常的混乱，随着业务逻辑增加，methods等属性内容的迭代，相当于你的逻辑代码以及变得脱节了，越来越难寻找去串联逻辑。这是非常糟糕的一件事情，意味着我修改逻辑我需要反复的去进行滚动。

this & context

在vue2属性中，对于this非常常见，因为你不得不去通过this.xxx 获取和设置，虽然一些优雅的方式，如：

methods: {
	saveAvtion() {
    const { name, age, action } = this
    console.log(name, age, action(name, age))
    /** end */
  }
}
复制代码

虽然通过上面的写法有一定的改善，但大部分this还是需要去写的。往往需要去关注this的指向，如this.$http的时候，this获取会发生改变？这就需要开发者去注意，而在setup函数中采用函数编程，可以减少一些this的编写。

配套服务

虽然Vue3.0 beta版本已经发布，但是正式生产环境还是需要等待一些组件库，Router，Vuex，周边等配套环境同步起来，根据尤大的直播说，预计在年中可以使用上，时间上还是挺快的。

总结

不得不说更新还是比较期待的，能够获得

更好的类型提示
更小的体积
更好的加载速度
更友好的代码阅读
......

结合自己Vue2的一些槽点有感，感谢尤大的科普。谁能推荐下哪款护法水好啊，尤大发际线都高了。

来源：oschina

链接：https://my.oschina.net/u/4331787/blog/3434357

标签

typescript

react

npm

Vue.js