vue3 hooks 可以转为 esm 写法？

[chill777]

之前的项目给别人写了，再拿过来的时候发现我的 hooks 被拆掉了。所以这种写法是可以的吗？

对方居然还说感觉这样更合理。。。

[horizon]

1. 什么叫 esm 写法？
2. 第二种相当于创建了一个 chartDataObj 的响应式对象 单例

看你们的需求。。
在没有更多背景的前提下，你的更好，没看到拆分的好处。但是单例的问题很大。

[abelmakihara]

这个图里好像看不出来什么
因为他把 onmount 和 useStoreStock 去掉了
如果没影响 那确实是没必要 hook 啊 一个方法就可以了
但是如果他这里去掉了 页面里加回来了那就看到底要抽象到什么程度了吧

[wangtian2020]

写了三年 vue 我没用过 hooks 和 mixin

[Yumwey]

esm 是写法吗？

这单纯就是写 vue 的把喜欢写 react 的代码改得更 vue 而已

[abelmakihara]

还有那个单例的到底需不需要单例
说到底还是要看需求 hook 没有更高级
不过估计大概率是你赢了

[mxT52CRuqR6o5]

reactive 这个 api 不算 hooks （那些 use 开头的才算），就是个单例

[liuhuihao]

左侧的是标准 hooks 写法，右侧是给拆成了一个一个 export 的 方法？右侧这个写法如果能实现功能的话我理解就是一个 utils 类似的东西，不是 hooks ，右侧这种写法 watch 、onMounted 咋写呢？感觉右侧这样限制很大，不是 hooks 写法了已经。很明显你的抽象方式是正确的

[chill777]

@abelmakihara
因为我这个 hooks ，有多个组件使用。还有生命周期 hook 和其他 hook 。抽成模块就没办法复用这些逻辑。
@horizon
esm：就是改成 import 和 export 写法。本来直接从 hooks 取值，就行。
我在想这种单例的写法，会有重复创建的问题吗？还有就是垃圾回收的的问题，如果我去其他使用这个变量的组件，变量会重新初始化吗？

[chenliangngng]

如果你是从 vue2 转到 vue3 ，那可能觉得第一种是对的

但是如果你 vue2 ，vue3 ，react 都写过，那就知道第二种才是那个合适的

为什么？
因为 hooks 存在的意义就是为了逻辑拆封，自定义的 hooks 应该额外定义。但是呢你现在展示的这个代码，拆封的太细了，拆到只剩 relative 是不应该的

[chenliangngng]

@chenliangngng relative => reactive

[chenliangngng]

@chenliangngng 拆封=>拆分

[liuhuihao]

@chill777 明显是你的写法更合理啊，我很好奇右侧那种写法 生命周期一类的咋写的，写在页面逻辑里吗？那还抽象个锤子。另外多个页面 import 的话，hooks 写法每次都是 return 一个新的对象，不会互相影响，右侧那种写法不就变成单例的了么，各个页面互相影响

[liuhuihao]

@chenliangngng #10 你再仔细看看 lz 的代码，并不是只拆分到 reactive ，他左侧整张图都是一个 hooks 只不过底部的 return 没有截上，我认为 lz 的写法是没有问题的，右侧的抽象反而是抽象了个寂寞

[liuhuihao]

我理解的 hooks 拆封
export default function (deps) {
const data = ref('')
const data2 = ref('')

const doSomeThing = ()=>{
XXX
}

watch(deps, XXX)

onMounted(()=>{
XXX
})

return {data,data2,doSomeThing}
}

[abelmakihara]

@chill777 就单论这个图片里的话
如果这个 obj 是单例的话 下面那个方法很明显也是获取 obj 的 我会扔到 store 里
如果不是单例的那就 hook
如果这个方法会有不同 hook 用？ 还可以把这些方法单独抽个 service
--
当然不会初始化了 这就是全局通用的

[Zzzz77]

这有啥争议，左边对

[Huelse]

右边的问题很大，既不单例，也不 esm ，堪称屎山之基。

[jspatrick]

是 hooks 就该用闭包（左），不是 hooks 没理由用 reactive （右），也可能是我业务场景不够丰富，目前没遇到过右边这种情况

[horizon]

@chill777 #8
不会重复创建，不会回收，不会重新初始化。
所以右侧这个写法没法复用。。

[a632079]

1. 这和 esm 没关系。
2. Vue 里面的响应式包 `@vue/reactivity`，比如 reactive 啥的都可以脱离 setup 使用。所以他第二种做法是可以的。

P.S pinia 里面的 introduce 里面就有提到，为啥要用它，不用第二种（直接使用 reactive 做状态管理）。其中最大的优势就是 SSR 友好。https://pinia.vuejs.org/introduction.html#Why-should-I-use-Pinia-