V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nanmu42
V2EX  ›  分享创造

2021 年到了, Vue 3 准备好了吗?

  •  1
     
  •   nanmu42 ·
    nanmu42 · 2021-03-07 21:45:49 +08:00 · 3913 次点击
    这是一个创建于 1118 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    27 条回复    2022-12-30 19:36:36 +08:00
    huijiewei
        1
    huijiewei  
       2021-03-07 21:47:39 +08:00   ❤️ 6
    已经换 react 了 :)
    nanmu42
        2
    nanmu42  
    OP
       2021-03-07 21:51:09 +08:00
    哈哈哈,别这样嘛。
    konakona
        3
    konakona  
       2021-03-07 22:02:54 +08:00   ❤️ 1
    说实话我更喜欢 JSX=。= vue2 时代遗留下来的问题就是单个 vue 文件巨特么长,动不动上千行,受不了哇。
    nanmu42
        4
    nanmu42  
    OP
       2021-03-07 22:10:12 +08:00
    @konakona composition API 出来了,现在业务代码也可以复用了,可能可以让你感觉好一点。
    shakukansp
        5
    shakukansp  
       2021-03-07 22:42:06 +08:00   ❤️ 1
    此外,Composition API 也带来了新的易错点,如果你的 composable 中用到了 watch(),并且在同一个 view 中的 n 个组件都用了该 composable,那么 watch()及其回调会被调用 n 次,这往往不是你想要的效果。解决方案是为 composable 提供初始化参数。

    你是认真的?
    nanmu42
        6
    nanmu42  
    OP
       2021-03-07 22:48:45 +08:00 via Android
    @shakukansp 认真,亲身经历。把 watch 写 composable 里很容易就中招了。
    shakukansp
        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>

    你再试试?
    nanmu42
        8
    nanmu42  
    OP
       2021-03-07 22:59:02 +08:00 via Android
    我的情况是这样的,A 引用 B,B 引用 C,B 和 C 都在 setup 里 useX(),useX 里有 watch.
    @shakukansp
    shakukansp
        9
    shakukansp  
       2021-03-07 23:08:23 +08:00   ❤️ 1
    @nanmu42 没道理,无论你怎么引用别的组件,每个 useCount 里面的 count 都是不一样的
    nanmu42
        10
    nanmu42  
    OP
       2021-03-07 23:15:35 +08:00 via Android
    @shakukansp 我理解 setup()也是一个生命周期钩子,组件 A 引用 B,B 引用 C,B, C 的 setup()都调用了 useX(), useX()中的 watch 会注册两次。这个和 count 是不是同一个关系不大。
    Count 可以是同一个,只要它是包级别的(在函数外面),我用了 store,情况很类似。
    shakukansp
        11
    shakukansp  
       2021-03-07 23:18:09 +08:00   ❤️ 1
    @nanmu42
    ??? count 不是同一个 watch 的自然也不是同一个,就不可能触发多次回调
    如果你这个 count 是 store 里拿出来的
    那两个 watch 监听的是同一个 count 那自然会触发两次
    nanmu42
        12
    nanmu42  
    OP
       2021-03-07 23:24:00 +08:00 via Android
    @shakukansp 对,就是你说的后一种情况啦。
    shakukansp
        13
    shakukansp  
       2021-03-07 23:32:54 +08:00   ❤️ 1
    @nanmu42
    感觉你是对 composition api 或者 react hooks 抽离出去的 useXXX 作用域理解有偏差
    每次调用 useXXX, 那是生成一个新的函数作用域,里面的东西都是重新注册的
    shakukansp
        14
    shakukansp  
       2021-03-07 23:36:56 +08:00   ❤️ 1
    store 里的状态不是在这个作用域里声明的,函数内部自然可以调用它所处的作用域上一级的变量

    相当于你在函数外面声明了一个变量
    nanmu42
        15
    nanmu42  
    OP
       2021-03-08 07:51:30 +08:00 via Android
    @shakukansp 在这个情况下 watch store 里的东西就容易重复 watch.
    谢谢你帮我澄清了这个问题,我等会改改文章里的说法。
    sam014
        16
    sam014  
       2021-03-08 09:40:29 +08:00   ❤️ 1
    感觉 Composition API 写法特残疾,写不下去,开了一个新项目用的 vue3,不过还是 SFC 的写法,
    其他项目考虑换 react,或许只有后管类的东西继续用 vue3 了( vue3 + SFC )
    nanmu42
        17
    nanmu42  
    OP
       2021-03-08 09:46:32 +08:00 via Android
    @sam014 方便分享下对 composition API 不满意的点吗?
    gouflv
        18
    gouflv  
       2021-03-08 09:48:38 +08:00 via iPhone   ❤️ 1
    上周刚想尝试,发现用到的多数组件目前并没有跟进 vue3,所以又降回 2 了。而且官方没有迁移工具,所以整体看,升级并不乐观。ps:react 真香
    ruoxie
        19
    ruoxie  
       2021-03-08 10:05:43 +08:00   ❤️ 1
    composition api+tsx 就像再写 reat,现在完全用不来 template 的写法了,另外 template+ts 的写法是真的残疾
    sunwang
        20
    sunwang  
       2021-03-08 10:14:48 +08:00   ❤️ 1
    @shakukansp use 了两次,生成两个不同的 watch 属于正常现象吧,你说的 "watch()及其回调会被调用 n 次,这往往不是你想要的效果"是啥意思,能详细的说说吗?
    cof404
        21
    cof404  
       2021-03-08 10:25:11 +08:00   ❤️ 1
    vue3 的 reactive 和 ref 让人头秃,反复改了好久才暂定下目前的最佳方案。
    第一阶段全部用 reactive 。第二阶段抛弃 reactive,全部用 ref 。第三阶段也就是现在,尽量用 reactive,少数用 ref 。
    nanmu42
        22
    nanmu42  
    OP
       2021-03-08 13:51:29 +08:00
    @sunwang 他是在说我文章里写的不严谨的地方,我想了一个可能更好的表述:

    不过,Composition API 也带来了新的易错点,如果你在 composable 中`watch()`store 中的状态,并且在同一个 view 中的多个组件中都用了该 composable,那么`watch()`及其回调会被调用多次,这往往不是你想要的效果。解决方案是为 composable 提供初始化参数。
    meepo3927
        23
    meepo3927  
       2021-03-08 14:49:33 +08:00   ❤️ 1
    目前还需要支持 IE11, 无缘 vue3
    tikazyq
        24
    tikazyq  
       2021-03-08 20:44:29 +08:00   ❤️ 1
    Vue3 绝对是大型项目的福音,支持
    tikazyq
        25
    tikazyq  
       2021-03-08 20:53:55 +08:00
    @cof404 reactive 跟 ref 可以互补
    whywhywhy
        26
    whywhywhy  
       2021-03-09 08:45:05 +08:00
    " 爱意满满的作品展示区。 "

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

    @Livid
    beiwei2008
        27
    beiwei2008  
       2022-12-30 19:36:36 +08:00
    @cof404 请教下,全用 ref 有什么弊端?感觉大部分场合无脑 ref 很方便呀
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2822 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 247ms · UTC 14:58 · PVG 22:58 · LAX 07:58 · JFK 10:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.