开发vue项目,该用template写法还是jsx写法?
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,更容易与其他库和框架集成。
如果看完有收获,欢迎点赞、评论、分享支持。你的支持和肯定,是我写作的动力
转载自:https://juejin.cn/post/7221376169370943549