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

• 資深大佬 : 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