Vue 3使用体会

69 阅读3分钟

什么是Vue 3 中的Hooks

在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数
无状态逻辑的库有很多,比如你可能已经用过的 lodash 或是 date-fns。

组合式函数约定用驼峰命名法命名,并以“use”作为开头。

使用

  1. 封装和复用有状态逻辑
  2. 在某种程度上,你可以将这些提取出的组合式函数看作是可以相互通信的组件范围内的服务。(代替vuex?)

问题: 有了组合式函数,还需要vuex/pinia来进行状态管理吗?

虽然通过组合式函数可以进行简单的状态管理,但是每个组件都可以修改状态,会使得状态难以追踪,所以vuex/pinia相对来说更规范,特别是对于大型项目,可以更好更规范的进行状态管理。

同理props也是如此,最好不简单的通过组合函数来管理,最好还是通过props进行单向数据流动?

虽然至今不太明白 单项数据流动的重要性 在组件嵌套的比较多的情况下 单项数据流动给数据更新带来了一定的难度,个人还是比较喜欢用组合式函数来进行多组件通信的。

www.cnblogs.com/best/p/1690…

对比

对比mixins

Vue 2 的用户可能会对 mixins 选项比较熟悉。它也让我们能够把组件逻辑提取到可复用的单元里。然而 mixins 有三个主要的短板:

  1. 不清晰的数据来源:当使用了多个 mixin 时,实例上的数据属性来自哪个 mixin 变得不清晰,这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由:让属性的来源在消费组件时一目了然。
  2. 命名空间冲突:多个来自不同作者的 mixin 可能会注册相同的属性名,造成命名冲突。若使用组合式函数,你可以通过在解构变量时对变量进行重命名来避免相同的键名。
  3. 隐式的跨 mixin 交流:多个 mixin 需要依赖共享的属性名来进行相互作用,这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入,像普通函数那样。

对比无渲染组件

组合式函数相对于无渲染组件的主要优势是:组合式函数不会产生额外的组件实例开销。当在整个应用中使用时,由无渲染组件产生的额外组件实例会带来无法忽视的性能开销

我们推荐在纯逻辑复用时使用组合式函数,在需要同时复用逻辑和视图布局时使用无渲染组件。

对比React hooks

组合式函数和自定义 React hooks 非常相似。

组合式 API 的一部分灵感正来自于 React hooks,Vue 的组合式函数也的确在逻辑组合能力上与 React hooks 相近。

然而,Vue 的组合式函数是基于 Vue 细粒度的响应性系统,这和 React hooks 的执行模型有本质上的不同。