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的朋友来说,学习曲线可能会更低一些而且非常好上手。
接下来我们就来看看以下的例子!
从上面代码你会发现几点:
- 首先是里面会用到的函数要自己从Vue里取出。
- data改由setup取代,setup上的属性将会回传到template(模板)上render(渲染)使用。
- 我们想要他创建一个新的state可以在setup()使用value函数。
- 没有methods,不管是生命周期函数或自定义函数都会在setup之中。
看到这可能会有人开始想,我2.x都还没有摸透,这样大改,天啊,快学不动了,哈哈
我们先来看看作者(尤雨溪)怎么看这次要更新的 Vue Function-based。
为什么作者会这样说呢?我们来看一下简单的Function-based跟React Hooks的差异!
Hooks 和JSX的搭配更简洁也是它的优点之一,但是当数据被更改时,造成组件会重新渲染,产生资源的消耗,但是Function-based就不一样,为什么作者会说「 Template 提供更好的静态优化」呢?
是因为当如果数据变化时,setup仅执行一次,而JSX每次渲染都会执行,Template(模版)不会做无谓的更新,不会进行进行渲染,在组件的更上面性能会更好!
Vue Function-based带来什么好处
- setup让相关的逻辑更容易放在一起。
- state跟methods是通过变量的方式来声明,可以大幅减少this指向的问题(在setup 内部你还是可以使用this,但大部分时候不会需要)。
- 共用组件之间的逻辑共用可以更加简单。
- 组件的性能提升。
- 减少初学者入门学习门槛。
我们来看一下 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,优点互相学习改进才能让开发者更愿意去使用它,毕竟最后都是用来解决问题。