这是一个创建于 1391 天前的主题，其中的信息可能已经有所发展或是发生改变。
分享新写的文章，欢迎各位一起交流。:)
Vue 3 生产可用了吗？好用吗？和 Vue 2 相比变化大吗？我试着用 Vue 3 编写了一个项目，发现它挺香的。
 |
1
huijiewei 2021-03-07 21:47:39 +08:00  6
已经换 react 了 :)
|
 |
2
nanmu42 OP 哈哈哈，别这样嘛。
|
 |
3
konakona 2021-03-07 22:02:54 +08:00 1
说实话我更喜欢 JSX=。= vue2 时代遗留下来的问题就是单个 vue 文件巨特么长，动不动上千行，受不了哇。
|
 |
5
shakukansp 2021-03-07 22:42:06 +08:00 1
此外，Composition API 也带来了新的易错点，如果你的 composable 中用到了 watch()，并且在同一个 view 中的 n 个组件都用了该 composable，那么 watch()及其回调会被调用 n 次，这往往不是你想要的效果。解决方案是为 composable 提供初始化参数。
你是认真的？ |
|
6
nanmu42 OP @shakukansp 认真，亲身经历。把 watch 写 composable 里很容易就中招了。
|
|
7
shakukansp 2021-03-07 22:51:56 +08:00 2
// useCount.ts
const useCount = () => { const count = ref(0); watch(count, () => { console.log('count:', count.value); }); return { count }; }; // helloWorld.vue <template> <button @click="count++">count is: {{ count }}</button> <button @click="count2++">count is: {{ count2 }}</button> </template> <script lang="ts"> import { ref, defineComponent } from 'vue'; import { useCount } from "../compositions/count"; export default defineComponent({ name: 'HelloWorld', props: { msg: { type: String, required: true } }, setup: () => { const { count } = useCount(); const { count: count2 } = useCount(); return { count, count2 }; } }); </script> 你再试试？ |
|
8
nanmu42 OP 我的情况是这样的，A 引用 B，B 引用 C，B 和 C 都在 setup 里 useX()，useX 里有 watch.
@shakukansp |
|
9
shakukansp 2021-03-07 23:08:23 +08:00 1
@nanmu42 没道理，无论你怎么引用别的组件，每个 useCount 里面的 count 都是不一样的
|
|
10
nanmu42 OP @shakukansp 我理解 setup()也是一个生命周期钩子，组件 A 引用 B，B 引用 C，B, C 的 setup()都调用了 useX(), useX()中的 watch 会注册两次。这个和 count 是不是同一个关系不大。
Count 可以是同一个，只要它是包级别的（在函数外面），我用了 store，情况很类似。 |
|
11
shakukansp 2021-03-07 23:18:09 +08:00 1
@nanmu42
？？？ count 不是同一个 watch 的自然也不是同一个，就不可能触发多次回调 如果你这个 count 是 store 里拿出来的 那两个 watch 监听的是同一个 count 那自然会触发两次 |
|
12
nanmu42 OP @shakukansp 对，就是你说的后一种情况啦。
|
|
13
shakukansp 2021-03-07 23:32:54 +08:00 1
@nanmu42
感觉你是对 composition api 或者 react hooks 抽离出去的 useXXX 作用域理解有偏差 每次调用 useXXX, 那是生成一个新的函数作用域，里面的东西都是重新注册的 |
|
14
shakukansp 2021-03-07 23:36:56 +08:00 1
store 里的状态不是在这个作用域里声明的，函数内部自然可以调用它所处的作用域上一级的变量
相当于你在函数外面声明了一个变量 |
|
15
nanmu42 OP @shakukansp 在这个情况下 watch store 里的东西就容易重复 watch.
谢谢你帮我澄清了这个问题，我等会改改文章里的说法。 |
 |
16
sam014 2021-03-08 09:40:29 +08:00 1
感觉 Composition API 写法特残疾，写不下去，开了一个新项目用的 vue3，不过还是 SFC 的写法，
其他项目考虑换 react，或许只有后管类的东西继续用 vue3 了（ vue3 + SFC ） |
 |
18
gouflv 2021-03-08 09:48:38 +08:00 via iPhone 1
上周刚想尝试，发现用到的多数组件目前并没有跟进 vue3，所以又降回 2 了。而且官方没有迁移工具，所以整体看，升级并不乐观。ps：react 真香
|
 |
19
ruoxie 2021-03-08 10:05:43 +08:00 1
composition api+tsx 就像再写 reat，现在完全用不来 template 的写法了，另外 template+ts 的写法是真的残疾
|
 |
20
sunwang 2021-03-08 10:14:48 +08:00 1
@shakukansp use 了两次，生成两个不同的 watch 属于正常现象吧，你说的 "watch()及其回调会被调用 n 次，这往往不是你想要的效果"是啥意思，能详细的说说吗？
|
 |
21
cof404 2021-03-08 10:25:11 +08:00 1
vue3 的 reactive 和 ref 让人头秃，反复改了好久才暂定下目前的最佳方案。
第一阶段全部用 reactive 。第二阶段抛弃 reactive，全部用 ref 。第三阶段也就是现在，尽量用 reactive，少数用 ref 。 |
|
22
nanmu42 OP @sunwang 他是在说我文章里写的不严谨的地方，我想了一个可能更好的表述：
不过，Composition API 也带来了新的易错点，如果你在 composable 中`watch()`store 中的状态，并且在同一个 view 中的多个组件中都用了该 composable，那么`watch()`及其回调会被调用多次，这往往不是你想要的效果。解决方案是为 composable 提供初始化参数。 |
 |
23
meepo3927 2021-03-08 14:49:33 +08:00 1
目前还需要支持 IE11， 无缘 vue3
|
 |
24
tikazyq 2021-03-08 20:44:29 +08:00 1
Vue3 绝对是大型项目的福音，支持
|
 |
27
beiwei2008 2022-12-30 19:36:36 +08:00
@cof404 请教下，全用 ref 有什么弊端？感觉大部分场合无脑 ref 很方便呀
|
Select Language