Vue3.0即将到来，你准备好了么？对于有些人可能是噩梦！哈哈哈~~~

前言

Vue.js作者尤雨溪就在VueConf 上海2019后发表了关于「Vue Function-based API RFC」，那你知道什么是Function-base吗？

这不是跟React Hooks很像吗？大家看到的第一感觉是这样，但看完整篇文章之后，会发现比React Hooks更简单且更亲切了一点，Function-based的Script写法跟原本Vue 2.x的写法有一点不太一样，对于原本写习惯2.x的朋友来说可能会不习惯，但是对于初学Vue的朋友来说，学习曲线可能会更低一些而且非常好上手。

接下来我们就来看看以下的例子！

从上面代码你会发现几点：

1. 首先是里面会用到的函数要自己从Vue里取出。
2. data改由setup取代，setup上的属性将会回传到template(模板)上render（渲染）使用。
3. 我们想要他创建一个新的state可以在setup()使用value函数。
4. 没有methods，不管是生命周期函数或自定义函数都会在setup之中。

看到这可能会有人开始想，我2.x都还没有摸透，这样大改，天啊，快学不动了，哈哈

我们先来看看作者(尤雨溪)怎么看这次要更新的 Vue Function-based。

为什么作者会这样说呢？我们来看一下简单的Function-based跟React Hooks的差异！

Hooks 和JSX的搭配更简洁也是它的优点之一，但是当数据被更改时，造成组件会重新渲染，产生资源的消耗，但是Function-based就不一样，为什么作者会说「 Template 提供更好的静态优化」呢？

是因为当如果数据变化时，setup仅执行一次，而JSX每次渲染都会执行，Template(模版)不会做无谓的更新，不会进行进行渲染，在组件的更上面性能会更好！

Vue Function-based带来什么好处

1. setup让相关的逻辑更容易放在一起。
2. state跟methods是通过变量的方式来声明，可以大幅减少this指向的问题（在setup 内部你还是可以使用this，但大部分时候不会需要）。
3. 共用组件之间的逻辑共用可以更加简单。
4. 组件的性能提升。
5. 减少初学者入门学习门槛。

我们来看一下 Vue 3.0的Function-based API写的例子。

> Vue3.0出来了吗 !?

> 还没 !?

> 那这个例子从哪里生出来的 !?

别紧张，听我慢慢说，因为我follow作者的Github，然后看到这个例子。

这个是开源社区 liximomo 大大 基于Vue 2.x的版本开发，可以让你写Function-based Api的扩充套件，Vue-function-api 跟Function-based的写法几乎一模一样，完全可以让你先体验Function-based的写法，虽然3.0还没有发布，但是就目前所公布出来的相关规范及API来看，Vue-function-api 都暂时可以帮你实现Function-based的Api写法。

没过多久就发现 vue-function-api 就被转移到Vue.js之下，太强了！

Vue 3.0 舍弃 Class Component

Vue 3.0 的一个主要设计目标是增强对 TypeScript 的支持，原本Vue开发团队期望通过 Class Component来达到这个目标，但Vue开发团队认为 Class 并不是解决这个问题的正确路线，所以在Vue 3.0舍弃 Class Component，选择了Function-based。

就连 React 也对于未来的进展也算是半放弃 Class Component，主推 Hooks。

Vue 2.x 到 3.0 升级须知

很多人会想说 3.0 发布后我的项目要怎样升级？难道要重构吗？Vue开发团队计划提供2个不同的版本，兼容版本和标准版本。

• 兼容版本：同时支持 3.0 API和所有 2.x 选项。
• 标准版本：只支持 3.0 API和部分 2.x选项。

也就是说 3.0 还是可以使用 2.x的API，不过具体怎样做还要看官方正式发布后才知道，期待吧！

因 Vue Function-based 而被废弃或个性的API

由于Function-based的出现，目前提案的一些 API 可能会不再被需要或是被强制修改，所以我们可以通过上面的例子来发现一些端倪。

• data
• methods
• mixins
• 所有的 lifecycle 被修改
• el

其他的提案可以看这个 global-api-change.md，目前还处于提案阶段，所以正式发布时可能还会改动！

Vue 3.0 看起来就像React，那我何不直接用React？

• Vue 3.0中template(模板)的使用跟优势完全没有改变（重点），React仍然使用JSX。
• Vue的渐进式的概念依然不变，门槛还是比React低。
• Vue Function-based 组件更新性能比较好。

其他更多关于 Function-based API 的问题在这个PR上面看。

最后

以上是我整理出来的 Vue 3.0 可能以及确定会更新的重点，这次 Vue Function-based的改变一定会大大影响使用 Vue 的开发者，有人觉得太接近React有点失望，有人跟我一样很期待 Vue 3.0 的到来，Vue这次的确受到 React Hooks的启发而开发出更好的Vue Function-based，优点互相学习改进才能让开发者更愿意去使用它，毕竟最后都是用来解决问题。

以下是我整理的一些关于Vue的学习教程！

关注公众号：fkdcxy 疯狂的程序员丶 获取上图Vue教程！

想了解更多技术知识欢迎评论区留言或私信我！