Vue模板与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>

1. Component2.vue

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

我能写得像component2.vue一样吗？两者的表现如何？

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>

可以使用呈现函数或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，这要简单得多。

考虑到组件的动态加载，您可以在模板中使用内置<component />组件和is支柱，如下所示：

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

因此，这与JSX或基于直接呈现函数的组件具有相同的优点。有关更多文件，请参见：

动态分量

呈现函数& JSX

Answer 2

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

• JSX: JavaScript的语法扩展，允许您在JavaScript文件中编写类似HTML的标记。基本上，JSX是一个JavaScript呈现函数，它可以帮助您将JavaScript直接插入到JavaScript代码中。
• 模板语法:一种基于HTML的模板语法，允许您以声明方式将呈现的DOM绑定到基础组件实例的数据。

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

这是什么意思？

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

有什么区别？哪一个更适合使用?

根据Vue.js文档，Vue将模板编译成高度优化的JavaScript代码。

但是，如果您熟悉Virtual概念，并且更喜欢JavaScript的原始功能，您也可以直接编写呈现函数而不是模板，并提供可选的JSX支持。

但是，注意到，它们并不像模板那样享受编译时优化的水平。

因此，我们可以得出结论，用Vue编写模板语法是更优化的。

Answer 3

vue模板比jsx函数更具可读性和易懂性。

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

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

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