V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
jahnsli
V2EX  ›  Vue.js

vue3 jsx 和 template 哪个性能好

  •  
  •   jahnsli · 2022-08-25 09:41:34 +08:00 · 3967 次点击
    这是一个创建于 828 天前的主题,其中的信息可能已经有所发展或是发生改变。

    二次封装 UI 库,card button 这种组件, 是建一个 vue 文件包一层 ( base-button base-card ),还是写 jsx render 哪种性能好

    20 条回复    2022-08-28 01:52:21 +08:00
    shintendo
        1
    shintendo  
       2022-08-25 09:57:54 +08:00
    我的理解是,template 的写法更“死板”,有利于编译器做静态分析和优化,性能应该是更好的
    molvqingtai
        2
    molvqingtai  
       2022-08-25 09:58:37 +08:00 via Android
    template 性能更好,在编译时就会把固定的节点抽离出来,不参与 vnode 遍历,jsx 就做不到
    bojackhorseman
        3
    bojackhorseman  
       2022-08-25 10:00:14 +08:00
    当然是 template 了,vue 针对 template 做了优化,用 jsx 就等于放弃了优化
    whywaoxaks
        4
    whywaoxaks  
       2022-08-25 10:01:10 +08:00
    template
    tutou
        5
    tutou  
       2022-08-25 10:08:46 +08:00
    我就说这帖子怎么看过?原来是群友,我还以为我大早上就头脑混乱了。
    jahnsli
        6
    jahnsli  
    OP
       2022-08-25 10:16:24 +08:00
    群里问,群里问,群里问完 V2EX 问。
    xiaojun996
        7
    xiaojun996  
       2022-08-25 10:48:33 +08:00
    想都不用想 template 可以在编译时优化
    CHTuring
        8
    CHTuring  
       2022-08-25 11:02:14 +08:00
    为什么我要用 Vue 写 tsx 吗?

    如果 Volar 没有那么傻逼,稍微没那么占内存,还稍微不那么卡的话,我也愿意用装上插件用模板。

    而且 template 的优化根本就可以忽略不计
    z13zvxc
        9
    z13zvxc  
       2022-08-25 11:05:02 +08:00
    @CHTuring Volar 真的卡的受不了 这也是我转 react 的最大动力
    CHTuring
        10
    CHTuring  
       2022-08-25 11:07:41 +08:00
    @z13zvxc Vetur 不更新了,Vue3 只有一个 Volar 这一个选项,M1 Pro 16G 都不配用它,该卡还是卡。我是 Vue 和 React 都写。所以能写 tsx 的我都用 tsx 代替,还不需要插件支持。
    sjhhjx0122
        11
    sjhhjx0122  
       2022-08-25 11:24:20 +08:00
    @CHTuring 卡就算了,反应还慢,最主要到现在自定义指令都没提示,props 定义起来还奇怪,真不知道 ts 到哪里去了
    anguiao
        12
    anguiao  
       2022-08-25 11:25:47 +08:00   ❤️ 1
    还好我用 WebStorm
    murmur
        13
    murmur  
       2022-08-25 11:31:36 +08:00
    @CHTuring 你都买 m1 macbook pro 了,换个 webstorm 试试,不是只有苹果值得花钱的
    CHTuring
        14
    CHTuring  
       2022-08-25 11:39:27 +08:00
    @murmur VSCode 用习惯了,话说 webstorm 的光标有没有 cursorSmoothCaretAnimation 这样的选项,太生硬了。
    daliusu
        15
    daliusu  
       2022-08-25 11:59:54 +08:00
    template 性能好,但是我选 jsx ,template 对 ts 的支持感觉很垃圾( webstorm
    caisanli
        16
    caisanli  
       2022-08-25 12:08:15 +08:00 via iPhone   ❤️ 1
    在生产环境就没区别了吧 打包的时候 都会转成 render 函数
    WhateverYouLike
        17
    WhateverYouLike  
       2022-08-25 12:09:46 +08:00 via Android
    @molvqingtai 前些日子刚好遇到一个 static hoisting 的小坑。虽然我的用法也是不规范的。
    zhoupeng199
        18
    zhoupeng199  
       2022-08-25 19:13:15 +08:00
    尤雨溪表示,“<script setup> + TS + Volar = 真香”。
    chenjiangui998
        19
    chenjiangui998  
       2022-08-28 01:51:07 +08:00
    @z13zvxc 我用 volar 一点都不卡啊 两台设备 m1 pro + 16g 和 i5 12500h + 64g
    chenjiangui998
        20
    chenjiangui998  
       2022-08-28 01:52:21 +08:00
    @anguiao webstorm template 不支持可选链的 ! 操作符, 用不下去了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2745 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:38 · PVG 20:38 · LAX 04:38 · JFK 07:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.