前言

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 教程！

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