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 更适合使用。例如，考虑您尝试设计 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

Answer 2

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

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

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

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