Vue 模板与 Vue jsx

Posted 2023-02-23

【中文标题】Vue 模板与 Vue jsx

【英文标题】：Vue template vs Vue jsx

【发布时间】：2021-06-02 15:02:54

【问题描述】：

你能解释一下 Vue 模板和 Vue 函数 jsx 有什么不同吗？哪个好用？

例如： 我有两个组件：

Component1.vue

<template>
  <div>
     <p>message</p>
  </div>
<template>
<script>
  export default 
     name:'Component1',
     data()
      return
        message:'This is component1'
      
     ,
  
</script>

Component2.vue

export default 
 name:'Component2',
 data()
   return
   message:'This is component2'
  
 ,
 render()
  return(<p>this.message</p>)
 

我可以像component2.vue 这样写吗？两者的表现如何？

【问题讨论】：

顺便说一句，如果你使用 Meteor，可能没有任何开箱即用的 Vue JSX 构建包。

是的，我基于Meteor 和Vue。我该怎么办？

要么编写构建包，要么设置预构建步骤...如果您的经验不丰富，我强烈建议您坚持使用普通模板语法。

但我想试试。你能分享一下你的经验吗？

那会非常长。从现有构建包的源代码开始学习。

【参考方案1】：

编写组件的两个版本都会做同样的事情。就性能而言，没有区别。两者都被编译成渲染函数，为你的组件返回虚拟 DOM 树。

区别在于实现的风格和语法。尽管使用 Vue，我们主要使用模板，因为它们比 JSX 更具可读性，但在某些情况下 JSX 更适合使用。例如，考虑您尝试设计 dynamic 标头组件的情况，其中 level 属性决定使用哪个 <h1...h6> 标签：

<template>
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</template>

使用渲染函数或 JSX 可以更优雅地编写相同的东西：

Vue.component('anchored-heading', 
  render: function (createElement) 
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  ,
  props: 
    level: 
      type: Number,
      required: true
    
  
);

此外，如果您使用 TypeScript，JSX 语法将为您提供编译时检查以验证道具和属性，尽管使用 Vue 2 进行设置非常麻烦。使用 Vue 3，这要简单得多。

就组件的动态加载而言，您可以在模板中使用带有is 属性的内置<component /> 组件：

<component v-bind:is="someComponentToRenderDynamically"></component>

因此，这带来了与 JSX 或基于直接渲染函数的组件相同的优势。更多文档参见：

Dynamic Components

Render Function & JSX

【讨论】：

感谢您的回复。我想跟踪 Vue 模板和渲染函数或 JSX 的速度，当它编译为 DOM 时。我可以检查合规时间吗？我该如何检查？

@RoeurbNavy 这样做实际上毫无意义。无论你使用什么，性能在任何情况下都是一样的，因为它最终都是虚拟 DOM。

【参考方案2】：

vue 模板比 jsx 函数可读性更强，更容易理解。

保存变量/属性并使用“someVariables”访问它们要容易得多，而不是总是告诉一个 vue 方法来读取它们

简而言之，最好使用 vue 模板，因为用它（和其他东西）更容易实现动态页面。

另外，此时继续通过方法发送 html 代码并不是一个好主意。

【讨论】：

Organizm 感谢您的回复。在我的真实组件上是动态渲染的，所以当我使用模板时，很难检查模板上的条件。所以我想使用 jsx，因为 jsx 写在script 上，并且在渲染之前很容易检查条件。你有动态渲染的解决方案吗？

没有真正的解决方案，因为它们都做同样的事情，vue 模板被设计为具有更有序的代码，并且能够将函数和方法与将被渲染。

哦，顺便说一句，理解它的一个好主意可能是考虑使用渲染函数的大型组件会是什么样子，最好知道你的代码将在哪里渲染而不是知道什么将在您的代码中呈现。

性能怎么样？我想跟踪渲染功能速度的时间。我可以检查一下吗？

同样，这些事情并没有真正的区别，它们只是不同的程序。现在，如果你想对你的 vue 项目有更多的控制和监控，你应该使用它的官方浏览器扩展，VueDevTools。