V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
Cbdy
V2EX  ›  问与答

Vue.js 的 JSX 中的 class attribute 为什么用 class,而不像 React 那样用 className

  •  
  •   Cbdy · Jan 27, 2021 via Android · 3040 views
    This topic created in 1928 days ago, the information mentioned may be changed or developed.

    React 给出的解释是 class 是 JavaScript 的保留字

    18 replies    2021-01-28 13:24:01 +08:00
    Chemist
        1
    Chemist  
       Jan 27, 2021 via iPhone
    因为 react 是 HTML in js,本质上还是 js 。

    vue 是 HTML 标签的拓展。
    hackyuan
        2
    hackyuan  
       Jan 27, 2021
    这个你都自问自答了,`class 是 Javascript 的保留字`。
    而 HTML 中只是标签上的一个属性而已。
    David1119
        3
    David1119  
       Jan 27, 2021
    难道不应该反过来问吗?怎么反而成了 vue 不对了。。。。
    anguiao
        4
    anguiao  
       Jan 27, 2021
    反正都得经过 Babel 转译嘛,我觉得没差。
    hjdtl
        5
    hjdtl  
       Jan 27, 2021
    一楼正确,此贴终结
    murmur
        6
    murmur  
       Jan 27, 2021
    因为在 html 里就是 class 啊,react 才是为了偷懒啥封装都不做
    u6pM63mMZ34z32cE
        7
    u6pM63mMZ34z32cE  
       Jan 27, 2021
    别问, 问就是新的语法 新的体验
    shintendo
        8
    shintendo  
       Jan 27, 2021
    正确的问法:为什么 React 要用 className 而不是跟 HTML 一样用 class,明明 vue 的 JSX 证明了保留字不是问题
    molvqingtai
        9
    molvqingtai  
       Jan 27, 2021
    楼上正解,因为 React 团队偷懒
    yaphets666
        10
    yaphets666  
       Jan 27, 2021
    vue 的思路是尽量保证和原始 HTML,JS,CSS 一致.
    template 里头的东西称作为模板,会经过 vue-loader 的处理.写什么都可以.
    class 和原生一样,并且意义是一致的,就是添加类名,当然选择 class 更符合直觉.
    这就是 vue 更加简单,容易学习的原因.尽量做的和原生一样.
    soulmt
        11
    soulmt  
       Jan 27, 2021
    这事又没有标准答案,都是开发者基于自己的逻辑来约定的而已, 不用太过于纠结。
    robinlovemaggie
        12
    robinlovemaggie  
       Jan 27, 2021
    说到这个就要刨根究底 React 和 Vue 本质上不同之处了:
    1.React 是个库(library), 而 Vue 是个框架(Framework)
    2.状态变更(Data Mutation)不同,React 是被动式(setState)给用户自主权,Vue 是主动 re-rendering,用户无法控制渲染时机。
    seki
        13
    seki  
       Jan 27, 2021
    className 是早期时候 API 设计的决定,现在来看其实本来用 class 也是没有问题的。react 开发团队也有过更改设计的想法,虽然目前没有什么新消息。采用类 react API 的 preact 就是用的 class

    这种事情没有必要拔得太高……
    Biwood
        14
    Biwood  
       Jan 27, 2021
    先搞清楚一个概念,Vue 里面那个不是 JSX,是 template,用的是 HTML 语法。
    React 里面那个才叫 JSX,用的是 JavaScript 语法。
    html 语法里面用 class,JS 语法里面用 className,很正常。
    shintendo
        15
    shintendo  
       Jan 27, 2021
    @Biwood 先搞清楚一个概念,Vue 支持 JSX
    Biwood
        16
    Biwood  
       Jan 27, 2021
    @shintendo #15
    Vue 里面所谓的 JSX 只能算是 template 的语法糖,这跟 React 里面一切皆用 JS 写的理念不一样。
    硬要刨根问底,我觉得本质上就是 template 语法跟 JavaScript 语法的区别,毕竟 Vue 的 template 模式继承自 Angular,而 React 不是。
    shintendo
        17
    shintendo  
       Jan 27, 2021
    @Biwood template 是 render funtion 的语法糖,JSX 也是 render function 的语法糖,这一点和 React 的 JSX 并没有本质区别
    assclb
        18
    assclb  
       Jan 28, 2021
    @Biwood #17 讲的没错,vue 里面不管是 jsx 还是 template 都是 render function 的语法糖...
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3206 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 74ms · UTC 10:56 · PVG 18:56 · LAX 03:56 · JFK 06:56
    ♥ Do have faith in what you're doing.