vue3的写法是很多样性的。

不同的写法，差别还挺大的，所以今天聊一聊各种写法的一些使用心得。

1.template写法

这种写法是最常见的，也是官方比较推荐的写法。

常见的格式如下

<template>
  {{ msg }}
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const msg = ref('hello world')
    return {
      msg
    }
  }
})
</script>

但是这种写法比较繁琐，所以vue也支持setup这种写法。

写法如下。

<template>
  {{ msg }}
</template>
<script lang="ts" setup>
  import { ref } from "vue"
  const msg = ref('hello world')
</script>

好处显而易见,这里贴一张官方说明的图片。

缺点是，使用成本比较高，举个props的例子。

比如需要定义一个props

  defineProps<{
    title: string;
  }>()

而当我们需要设置默认值时。

withDefaults(
  defineProps<{
    title?: string
  }>(),
  {
    title: 'nihao'
  }
)

//或者写成如下方式
// 实验特性，解构
const { title = 'nihao' } = defineProps<{
   title?: string
}>()

而且当defineProps的类型定义来自于另外的文件的时候，还会出现类型错误。详情可查看vue的这条issue

import type { TitleProps } from './title-type';
defineProps<TitleProps>()

需要改成如下写法。

import type { TitleProps } from './title-type';
interface Props extends TitleProps {}
defineProps<Props>()

综上，template的写法是最常见的，推荐使用script setup写法，就是使用成本会高一些。

2.jsx写法

jsx写法，在vue官方脚手架中是默认支持的。

写法如下

const titleprops = {
  title: {
    type: String as PropType<string>,
    default: 'nihao'
  }
}
type ButtonProps = ExtractPropTypes<typeof titleprops>
export default defineComponent({
  props: titleprops,
  setup(props: ButtonProps) {
    const { title } = toRefs(props)
    return () => <>{title.value}</>
  }
})

其中type类型可以单独提取到其他文件，写法上也比较灵活。

缺点就是，写法上与template上会有不同。

如果说组件需要更多的组合性，用jsx写可能会事半功倍。

比如之前文章介绍的Space组件，使用renderSlot遍历默认插槽，创建包裹元素这种需求。

api写法

除了这两种写法，在一些组件库中经常会采用api创建组件。

比如在element-plus框架中，渲染loading组件。

主要通过h,createVNode, render,renderSlot....等官方提供的api根据需要创建组件。

这种写法更加的灵活多变，可以根据不同的需求创建和组装各种不同的组件。

缺点也很明显，那就是得对vue有比较深入的了解。

总结

实际项目开发中，还是根据自己的需求选择合适的写法。

如果你不知道怎么选，不妨看看下面几条建议。

1. 如果你已经熟悉了 Vue 的模板语法，或者你想让模板代码更易于理解和维护，那么你可以选择使用模板语法。

2. 如果你更喜欢编写 JavaScript 代码，那么你可以尝试使用 Vue 的 JSX 语法。

3. 如果你在开发复杂的应用程序，且需要更多的可读性和可维护性，那么使用模板语法可能更合适，因为它更接近 HTML，更容易理解和修改。

4. 如果你在开发组件库或需要更多的可组合性，那么使用 JSX 可能更合适，因为它更接近 JavaScript，更容易与其他库和框架集成。

---

如果看完有收获，欢迎点赞、评论、分享支持。你的支持和肯定，是我写作的动力