2021 年到了， Vue 3 准备好了吗？

[nanmu42]

分享新写的文章，欢迎各位一起交流。:)

Vue 3 生产可用了吗？好用吗？和 Vue 2 相比变化大吗？我试着用 Vue 3 编写了一个项目，发现它挺香的。

• 知乎： https://zhuanlan.zhihu.com/p/355315790
• 博客： https://nanmu.me/zh-cn/posts/2021/is-vue-3-ready/

[huijiewei]

已经换 react 了 :)

[nanmu42]

哈哈哈，别这样嘛。

[konakona]

说实话我更喜欢 JSX=。= vue2 时代遗留下来的问题就是单个 vue 文件巨特么长，动不动上千行，受不了哇。

[nanmu42]

@konakona composition API 出来了，现在业务代码也可以复用了，可能可以让你感觉好一点。

[shakukansp]

此外，Composition API 也带来了新的易错点，如果你的 composable 中用到了 watch()，并且在同一个 view 中的 n 个组件都用了该 composable，那么 watch()及其回调会被调用 n 次，这往往不是你想要的效果。解决方案是为 composable 提供初始化参数。

你是认真的？

[nanmu42]

@shakukansp 认真，亲身经历。把 watch 写 composable 里很容易就中招了。

[shakukansp]

// 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>

你再试试？

[nanmu42]

我的情况是这样的，A 引用 B，B 引用 C，B 和 C 都在 setup 里 useX()，useX 里有 watch.
@shakukansp

[shakukansp]

@nanmu42 没道理，无论你怎么引用别的组件，每个 useCount 里面的 count 都是不一样的

[nanmu42]

@shakukansp 我理解 setup()也是一个生命周期钩子，组件 A 引用 B，B 引用 C，B, C 的 setup()都调用了 useX(), useX()中的 watch 会注册两次。这个和 count 是不是同一个关系不大。
Count 可以是同一个，只要它是包级别的（在函数外面），我用了 store，情况很类似。

[shakukansp]

@nanmu42
？？？ count 不是同一个 watch 的自然也不是同一个，就不可能触发多次回调
如果你这个 count 是 store 里拿出来的
那两个 watch 监听的是同一个 count 那自然会触发两次

[nanmu42]

@shakukansp 对，就是你说的后一种情况啦。

[shakukansp]

@nanmu42
感觉你是对 composition api 或者 react hooks 抽离出去的 useXXX 作用域理解有偏差
每次调用 useXXX, 那是生成一个新的函数作用域，里面的东西都是重新注册的

[shakukansp]

store 里的状态不是在这个作用域里声明的，函数内部自然可以调用它所处的作用域上一级的变量

相当于你在函数外面声明了一个变量

[nanmu42]

@shakukansp 在这个情况下 watch store 里的东西就容易重复 watch.
谢谢你帮我澄清了这个问题，我等会改改文章里的说法。

[sam014]

感觉 Composition API 写法特残疾，写不下去，开了一个新项目用的 vue3，不过还是 SFC 的写法，
其他项目考虑换 react，或许只有后管类的东西继续用 vue3 了（ vue3 + SFC ）

[nanmu42]

@sam014 方便分享下对 composition API 不满意的点吗？

[gouflv]

上周刚想尝试，发现用到的多数组件目前并没有跟进 vue3，所以又降回 2 了。而且官方没有迁移工具，所以整体看，升级并不乐观。ps：react 真香

[ruoxie]

composition api+tsx 就像再写 reat，现在完全用不来 template 的写法了，另外 template+ts 的写法是真的残疾

[sunwang]

@shakukansp use 了两次，生成两个不同的 watch 属于正常现象吧，你说的 "watch()及其回调会被调用 n 次，这往往不是你想要的效果"是啥意思，能详细的说说吗？

[cof404]

vue3 的 reactive 和 ref 让人头秃，反复改了好久才暂定下目前的最佳方案。
第一阶段全部用 reactive 。第二阶段抛弃 reactive，全部用 ref 。第三阶段也就是现在，尽量用 reactive，少数用 ref 。

[nanmu42]

@sunwang 他是在说我文章里写的不严谨的地方，我想了一个可能更好的表述：

不过，Composition API 也带来了新的易错点，如果你在 composable 中`watch()`store 中的状态，并且在同一个 view 中的多个组件中都用了该 composable，那么`watch()`及其回调会被调用多次，这往往不是你想要的效果。解决方案是为 composable 提供初始化参数。

[meepo3927]

目前还需要支持 IE11， 无缘 vue3

[tikazyq]

Vue3 绝对是大型项目的福音，支持

[tikazyq]

@cof404 reactive 跟 ref 可以互补

[whywhywhy]

" 爱意满满的作品展示区。 "

没看到什么作品，可能是节点错了。

@Livid

[beiwei2008]

@cof404 请教下，全用 ref 有什么弊端？感觉大部分场合无脑 ref 很方便呀