Vue 模板与 Vue jsx

Question

你能解释一下 Vue template 和 Vue function 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？两者的表现如何？

Answer 1

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

区别在于实现的风格和语法。虽然在 Vue 中，我们主要使用模板，因为它们比 JSX 更具可读性，但在某些情况下 JSX 更适合使用。例如，考虑一下您尝试设计动态标头组件的情况，其中prop 决定使用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 和属性，尽管使用 Vue 2 进行设置非常麻烦。使用 Vue 3，这要简单得多。

就考虑组件的动态加载而言，您可以在模板中使用带有 prop 的内置<component />组件，如下所示：is

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

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

动态组件

渲染函数和 JSX

Answer 2

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

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

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

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