Composition API解决了什么问题?
为了降低Vue2代码模式中复杂组件的代码维护难度,Vue3.0提出了新特性Composition API。
- 以函数为基础单位来打包可复用逻辑,并注入到任意组件,让视图和业务解耦更优雅
- 碎片化使得相同功能的业务放置更紧凑,提高开发体验
Composition API VS React的hooks
实现原理
- React hook基于链表实现,每个hook的next是指向在一个hook的(由于在函数里使用hook会导致顺序不正确,因此react不允许这样使用),每次组件被render时会顺序执行全部的hooks。React数据更改时,会重新执行render,从而会使hook重新注册一次。(在每一轮渲染期间生成的临时闭包函数增加GC压力)
- Vue hook只会在setup函数被调用时注册一次。因为vue中的数据响应是基于proxy的。 Composition API的实现借鉴了React Hooks,但是其自然的响应式数据,完美的避开了React Hooks的缺点。
参考链接:
Introduction - Composition API
Vue3 的新特性(二) —— Composition-Api
setup vs 5 react hooks,助你避开"沟"中陷阱