Vue.js Vue模板与Vue jsx

你能解释一下Vue模板和Vue函数jsx的区别吗？哪一个好用

例： 我有两个部分：

Component1.vue

{{message}}

导出默认值{
名称：'Component1'，
数据（）{
返回{
消息：“这是组件1”
}
},
}

Component2.vue

导出默认值{
名称：'Component2'，
数据（）{
返回{
消息：“这是组件2”
}
},
render（）{
返回（{this.message}
）
}
}

---

我可以像

component2.vue

那样编写吗？两者的性能如何？

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

保存变量/属性并使用“{someVariables}}”访问它们比总是告诉vue方法读取它们要容易得多

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

---

另外，在这一点上，继续通过方法发送html代码不是一个很好的主意。

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

不同之处在于实现的风格和语法。虽然对于Vue，我们主要使用模板，因为它们比JSX更具可读性，但在某些情况下，JSX更适合使用。例如，考虑您试图设计一个<强>动态头组件，其中“代码>级别< /COD> PROP决定使用哪个<代码> <代码>标签：

<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>

此外，如果您使用的是TypeScript，JSX语法将为您提供编译时检查以验证道具和属性，尽管使用VUE2设置这一点相当麻烦。对于VUE3，这要简单得多

考虑到组件的动态加载，您可以在模板中使用内置的

组件和

is

道具，如下所示：

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

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

---

Organizm感谢您的回复。在我的真实组件上，渲染是动态的，所以当我使用模板时，很难检查模板上的条件。所以我想使用jsx，因为jsx是在

script

上编写的，在渲染之前很容易检查条件。你有动态渲染的解决方案吗？没有真正的解决方案，因为它们都做相同的事情，vue模板的设计是为了拥有更有序的代码，并且能够将函数和方法与要渲染的代码分开。哦，顺便说一下，理解它的一个好办法可能是考虑使用render函数的大型组件是什么样子的，最好知道代码将呈现在哪里，而不是知道代码中将呈现什么。性能如何？我想跟踪渲染函数速度的时间。我可以检查一下吗？再说一遍，这类事情其实没有什么区别，只是程序不同而已。现在，如果您想对vue项目进行更多的控制和监视，应该使用其官方浏览器扩展VueDevTools。谢谢您的回复。我想跟踪Vue模板和渲染函数或JSX在编译到DOM时的速度。我能查一下康普利时间吗？我怎么能检查呢？这样做其实是没有意义的。在任何情况下，无论您使用什么，性能都是一样的，因为它最终都是虚拟DOM。感谢您的解释。顺便说一句，如果您使用Meteor，Vue JSX可能没有任何现成的构建包。是的，我基于

Meteor

和

Vue

。我该怎么做？要么编写构建包，要么设置预构建步骤。。。如果你不是很有经验，我强烈建议你坚持使用普通的模板语法，但我想试试。你能分享一下你的经历吗？那将是非常漫长的。从学习现有构建包的源代码开始。

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