Vue3 的组合式 API 优点是啥?

查看 275|回复 20
superedlimited   
让 vue 更容易学了,之前的 vue2.0 ,相比较于 react 真是太难了~
vinsony   
@wu67 #6 我觉得这算是最没用的优点了,改 html 和 css 的时候还是得去翻
MRG0   
除了更灵活,别的我没感觉出来
wu67   
@vinsony 你这不是硬杠吗? vue2 改 html 和 css 不照样要翻来翻去? 现在组合式好歹把 js 部分的给调了, 改逻辑的时候不用那么频繁翻页
mxT52CRuqR6o5   
组合优于继承的思想,不过我觉得,应用不复杂到一定程度,未必能体会到组合的优势
反倒是生命周期的那套设计可能更符合上古 jquery 时代的前端的直觉(不过组合式 API 里也有生命周期的概念,不像 react 那样完全抛弃了生命周期的概念,属于是介于两者中间的设计)
不过你要问我用啥我肯定是用组合式 API
DOLLOR   
选项式 API 按照 data 、methods 、生命周期、computed 、watch 划分区域。
组合式 API 则是鼓励开发者按照业务来划分区域。
选项式 API 写法会造成相同业务之间的数据、逻辑经常割裂开来,而且不易于复用。
组合式 API 目的就是解决这个问题,但是对开发者的要求也提高了。因为“业务”并不是很清晰的概念。
如果开发者技术能力不行,对业务了解不足,缺乏远见,就会写出比选项式 API 更混乱的代码。
zglw2012   
可以将业务逻辑与 vue 框架分离
class AService{
state
method(){
// ...
}
}
对接到 vue 组件的时候,可以直接使用一个 reactive 就完成了逻辑的响应式绑定:
const aService = reactive(new AService())
在模板里,需要用 state 了,就是 aService.state ,需要用函数了,就 aService.method()
也就是说,用 vue 组合式 api ,一般的项目只用一个 reactive 就够了,再大一点的项目,加个 provide 和 inject 也够了。
如果两个业务逻辑互相有依赖,可以使用构造函数传,也可以在一个业务逻辑里增加个 setBService 的方法传。
配合 ts ,维护的时候在模板里直接 F12 就跳转到对应的 ts 实现了,简直不要太快。
asen001   
好处是更灵活,可以写的花里胡哨的各种封装。但是如果完全不考虑封装和复用,按着 options api 的风格写大坨的 setup 函数,很容易就成屎山了。
看过同事两千多行的 vue 文件,光 setup 函数 return 就有七八十行,恐怖至极
Anivial   
简单来说就是更符合编程习惯了,变量和函数的命名是需要用到时定义,而不会出现一堆变量都在 data 里每次查看引用与定义都像是坐过山车。
optional   
可以按照功能组织代码。
最简单的例子,onMounted 可以调用多次,不同的逻辑卸载不同的代码块里,甚至封装成一个功能插件。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部