Vue模板 vs Vue jsx

Question

您能解释一下Vue模板与Vue函数JSX的区别吗？它们有什么不同？哪个更适合使用？

例如：

我有两个组件：

1. Component1.vue

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

2. Component2.vue

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

我可以像 component2.vue 这样编写吗？两种方式的性能如何？

- Roeurb Navy

---

顺便提一下，如果你使用Meteor，可能没有针对Vue JSX的开箱即用构建包。 - ghybs

是的，我基于 Meteor 和 Vue。我该怎么做？ - Roeurb Navy

要么编写构建包，要么设置预构建步骤... 如果您没有高度经验，我强烈建议坚持使用正常的模板语法。 - ghybs

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

请查看akryum：vue-component构建包：https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component - ghybs

Answer 1

两种编写组件的方式都会实现相同的功能。就性能而言，它们之间没有区别。两者都被编译成渲染函数，为您的组件返回虚拟DOM树。

区别在于实现的特点和语法。尽管在Vue中，我们大多使用模板，因为它们比JSX更易读，但有些情况下使用JSX更合适。例如，考虑设计一个动态标题组件的情况，其中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>

可以使用 render 函数或 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语法将为您提供编译时检查以验证props和attributes，但在Vue 2中设置它非常麻烦。在Vue 3中，这变得更加简单。

就动态加载组件而言，您可以在模板中使用内置的组件，并使用is属性，例如：

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

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

动态组件

渲染函数和JSX

- Harshal Patil

---

谢谢您的回复。我想追踪Vue模板和渲染函数或JSX的速度，当它们编译为DOM时。我能检查编译时间吗？我该如何检查？ - Roeurb Navy

@RoeurbNavy 这样做实际上是没有意义的。无论你使用什么，性能都会完全相同，因为最终都是虚拟 DOM。 - Harshal Patil

@HarshalPatil，你能详细解释一下吗？“如果你正在使用TypeScript，JSX语法将为你提供编译时检查，以验证props和attributes。”那么，如果没有JSX，它将以何种方式不起作用？你能指向一些研究或文档吗？ - undefined

@Julisch，在2023年，你可以安全地忽略那部分内容了。早期版本的TypeScript和Vue.js不支持在SFC（*.vue）文件中进行类型检查。但现在不再是这样了。它可以在没有任何特殊魔法的情况下正常工作。 - undefined

Answer 2

首先让我们看看什么是模板语法和JSX：

• JSX：JavaScript的语法扩展，允许您在JavaScript文件中编写类似HTML的标记。基本上，JSX是一个JavaScript渲染函数，它帮助您将HTML插入到JavaScript代码中。
• 模板语法：基于HTML的模板语法，允许您声明性地将呈现的DOM绑定到底层组件实例的数据。

使用Vue模板就像使用JSX一样，它们都是使用JavaScript创建的。主要区别在于Vue模板是符合规范的浏览器和HTML解析器可以解析的语法上有效的HTML。

这是什么意思？

• JSX函数从未在实际的HTML文件中使用，而Vue模板是使用的。

有什么区别？哪个更好使用？

根据Vue.js文档，Vue会将模板编译成高度优化的JavaScript代码。
但是，如果您熟悉虚拟DOM概念并喜欢JavaScript的强大功能，则还可以直接编写渲染函数，并支持可选的JSX。
但请注意，它们无法像模板一样享受编译时的优化。 因此，我们可以得出结论：使用Vue编写模板语法更加优化。

- Abraham Izadi

Answer 3

Vue模板比JSX函数更易读和理解。

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

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

此外，现在通过方法发送HTML代码不是一个很好的主意。

- Sphirye Organizm

---

Organizm，感谢您的回复。我的实际组件是动态渲染的，因此当我使用模板时，很难在模板上检查条件。所以我想使用JSX，因为JSX写在script中，这样在渲染之前很容易检查条件。您有任何关于动态渲染的解决方案吗？ - Roeurb Navy

由于它们都执行相同的操作，因此并没有真正的解决方案。Vue 模板旨在具有更有序的代码，以便能够将函数和方法与将呈现的代码分开。 - Sphirye Organizm

顺便说一句，理解它的一个好方法可能是考虑一下使用渲染函数的大型组件会是什么样子，知道你的代码将在哪里呈现比知道你的代码将呈现什么更好。 - Sphirye Organizm

性能如何？我想追踪渲染函数速度的时间。我可以检查吗？ - Roeurb Navy

再说，这些事情实际上并没有什么区别，它们只是不同的过程。现在，如果你想对你的Vue项目有更多的控制和监控，你应该使用它的官方浏览器扩展程序VueDevTools。 - Sphirye Organizm