Question

你能解释一下 Vue 模板和 Vue 函数 jsx，它们有什么不同？哪个好用？

例如：我有两个组件：

Component1.vue

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

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 prop 决定使用哪个 <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 语法将为您提供编译时检查以验证 props 和属性，尽管使用 Vue 2 进行设置非常麻烦。使用 Vue 3，这要简单得多。

就组件的动态加载而言，您可以在模板中使用带有 <component /> 属性的内置 is 组件：

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

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

Dynamic Components

Render Function & JSX

Answer 2

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

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

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

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

Vue 模板与 Vue jsx

2 个答案: