Vue3 编程范式探索
Vue3 中添加 组合式API 类似于 React Hooks ,它让我们用 fp 风格的方式来组织代码,通过拆分组合式函数来实现视图层和业务层代码的分离。
这种 fp 未必是真正的fp,只是写起来、看起来像fp。但相比 HOC 和 mixin 两种方案,fp让开发者具有更好组织代码结构的能力,可以更好的去提升代码的可维护性(可复用、可拓展、可读)。
fp 特点
- 组合式函数内有 3 种注入实现:
- 参数注入
- 通过
import
或useXXX
注入全局性的内容 - 通过
const token = ref()
注入组件、DOM,需要在onMounted
或Watch
中访问。
fp 不足
Watch
中需要判断 ref 注入,可能带来心智负担- fp 中的 视图层 与 业务层 缺乏 显式的约束依赖和有效关联的手段,这会增加开发者的心智负担,oop中通过类实现接口 (
implements
) 可以轻松做到这点。
oop 不足
- 在 template 中处理事件时,this的指向可能会丢失,需要使用箭头函数包裹,例
@focus="() => service.focus()"
其它注意项
- oop + reactive 方式,service 类
constructor
中使用的 this 并非reactive
函数返回的Proxy
对象,所以构造函数中this属性的访问是不具有响应式的,需要显式的通过reactive(this)
来实现响应式,或者在外部调用,reactive库内部已经通过Map实现了缓存,所以也不需要担心性能问题。
个人总结
- 由于组合式函数完全符合oop中对象的一些基本特质,所以这样的 fp 和 oop 在本质上可能是一致的。fp 通过闭包创建了一个作用域实现了局部的状态,这对应 oop 中类和对象,区别是 fp 中不需要写
this
。 - 如有错漏欢迎批评、指正,如果对你理解有帮助欢迎star和讨论
参考
https://staging-cn.vuejs.org/guide/reusability/composables.html