前言

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

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

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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

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

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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即将到来,你准备好了么?-青梅煮码
Vue3.0即将到来,你准备好了么?-青梅煮码
Vue3.0即将到来,你准备好了么?-青梅煮码

> Vue3.0出来了吗 !?

> 还没 !?

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

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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

Vue3.0即将到来,你准备好了么?-青梅煮码

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,优点互相学习改进才能让开发者更愿意去使用它,毕竟最后都是用来解决问题。