--- highlight: a11y-dark theme: cyanosis --- 最近准备写一系列关于 `Vue3` 相关技巧的系列文章，下面这些文章也同样精彩，感兴趣的可以关注一波。 [【Vue3 进阶👍】：如何批量导出子组件的属性和方法？从手动代理到Proxy的完整指南在 Vue3 开发的过程中，常 - 掘金](https://juejin.cn/post/7482723688674099226)) # 前言一般而言，我们在用`Vue`的时候，都是使用模板进行开发，但其实`Vue` 中也是支持使用`jsx 或 tsx`的。最近我研究了一下如何在项目中混合使用二者，并且探索出了一些模式，本文就是我在这种开发模式下的一些总结和思考，希望能帮助到大家。由于`tsx` 就是`ts`版本的 `jsx`,二者基本上可以认作一个东西，所以下文使用`tsx`的地方，一般而言对于`jsx`也同样适用。 # 模板开发的痛点通常我们都是通过模板来定义我们的ui，这是官方推荐的编写方式，模板开发有很多优点,比如: * 简单易上手，接近原生html的编写模式。 * 内置了自定义指令、事件修饰符等方便的功能。 * 模板在编译期间会做一些优化例如静态提升等，所以它的性能会更好。 * 内置 `css scoped` 方案，简单有效，使用体验优于 `css module` 和 `css in js` 方案模板开发提供了指令、事件修饰符等功能，方便我们复用一些逻辑。特别是 `css scoped` 方案，个人觉得比 `css module` 和 `css in js` 方案更直观好用。然而纯模板开发也有一些缺点，比如: * 不够灵活，模板语法由于不是标准的`js`语法，不够灵活，在实现一些复杂场景的时候，便会显得束手束脚，写出的代码会变得有些臃肿。 * 难以复用模板片段，基于`.vue` 文件的单文件方案导致无法在同一个文件中定义多个组件，很多时候我们不得不新建一个个的小文件来创建组件,使得我们组件拆分不那么灵活； # tsx 开发的痛点上面我们说到模板不够灵活，而由于这方面恰好是 `tsx` 的长处，借助一些工具如`vite-plugin-jsx` 的帮助，我们可以很方便地在 `vue3` 中使用 `tsx` 来开发，下面是一个在`vue3`中使用`tsx`开发的例子。 ```ts import { defineComponent, ref } from "vue"; export default defineComponent({ name: "TsxDemo", props: { msg: { type: String, required: true, default: "hello wrold", }, }, setup(props) { const count = ref(0); return () => (

{props.msg}

{count.value}

); }, }); ``` > vue 中使用 tsx 开发还有一些需要注意的点，但由于本文重点不在于教大家tsx基础，所以我们这里按下不表，这里贴一个链接方便大家学习([Vue3 + TSX 最佳实践？不存在的 - 掘金 (juejin.cn)](https://juejin.cn/post/7007731144418394149)) tsx的优点: * 自由，由于`jsx`语法本质上就是在写`js`，所以写`jsx`基本是随心所欲，想怎么写就怎么写。 * 便于组件拆分，可以在同一个文件中组织多个组件。 tsx 的缺点 * 不能使用自定义指令、事件修饰符等功能。 * 由于`tsx`直接就是运行时了，无法在编译期做一些优化，导致性能比不过模板; * 没法使用 `defineProps` `defineEmits` 等只能用在`setup`语法糖中的预编译宏; * 没法使用 `css scoped`, 不管是 `css module` 还是 `css in js` 都不如 `css scoped` 那么简洁直观; 由于 `tsx` 开发模式不是`vue`官方推荐的开发模式，没法使用一些内置的功能，但我觉得最遗憾的是没法使用`.vue`单文件组件提供的 `css scoped` 这种`css`方案，个人觉得该方案相较于`css modules` 和 `css in js`方案更加简单易用。另外一个比较大的问题还在于，没法使用`defineProps` `defineEmits`这些`setup script` 语法糖，导致在写 `ts` 类型时，只能使用基于运行时的推导方案,我们看下面个例子。 ```ts export default defineComponent({ props: { count: { type: Number, required: true, }, person: { type: Object as PropType<{ name: string }>, }, color: { type: String as PropType<"success" | "error" | "primary">, required: true, }, }, setup() { return () =>

demo

; }, }); ``` 在这里，我们写`props`的定义的时，很多情况下需要依赖 `as PropType` 来帮我们推断出更精确的类型，而在`setup script`中我们可以使用基于`ts`的类型方案,这种方式显然会更加地友好。 ```ts ``` 既然模板开发和`tsx`开发都有各有各的优缺点，那么有没有什么办法可以将他们的优点组合一下呢，答案即是我们今天要讨论的`setup script` + `tsx` 混合编程模式。 # 混合编程那么如何开启 `setup script` + `tsx` 混合编程模式呢? 很简单将`lang`改为`tsx` 就可以 ```ts ``` 首先我们按最常规的方法，定义一个子组件，并且渲染到父组件中: ```ts ``` 这就是最初始的状态，我们将在`.tsx` 中写组件的方式搬到了 `setup script` 中， `Demo`组件接受一个类型为`string`的属性`msg`，这段代码在浏览器中最终会渲染成 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f94663c06ac34b5d9268b9b576cea361~tplv-k3u1fbpfcp-watermark.image#?w=862\&h=112\&s=10344\&e=png\&b=ffffff) 现在我们它加上样式，由于我们是在`.vue`文件中编写 `Demo` 组件，所以我们可以运用`单文件`内置的css方案。 `.vue` 文件中支持 `css module` 和 `css scoped` 方案，这两种方式都可以用，我们先看 `css module`方案 ```ts ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dff60c2cfca40f99ba949808989f8c7~tplv-k3u1fbpfcp-watermark.image#?w=888\&h=110\&s=10877\&e=png\&b=ffffff) 可以看到，完美生效，我们再来看一下 `css scoped`方案: ```ts ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e95ce9f0cdc4f13b466cc735335f1a1~tplv-k3u1fbpfcp-watermark.image#?w=1216\&h=152\&s=12721\&e=png\&b=ffffff) 可以看到，并没有生效，这是因为`Demo`是一个子组件,而`scoped`方案不会透传到子组件中`dom`中,所以这里我们得用`:deep`处理下: ```tsx ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dff60c2cfca40f99ba949808989f8c7~tplv-k3u1fbpfcp-watermark.image#?w=888\&h=110\&s=10877\&e=png\&b=ffffff) 再刷新下浏览器就可以看到css 生效了。到这一步，通过用`:deep`做一下特殊处理，我们可以实现在 `vue` 中使用`css scoped`方案了。那，能不能连 `:deep`都不写呢? 我们继续研究下。这里之所以需要`:deep` 特殊处理的原因在于`Demo` 是一个组件，而`css scoped`默认不会透传到子组件中，那么如何去规避这个问题呢？其实，`Demo`组件本质上是要实现一个生成一棵`vnode` 树，而这可以通过函数去生成: ```ts const renderDemo = (props:{msg:string}) => {

msg is {props.msg}

} ``` 现在我们需要将这个函数生成的 `vnode` 插入到模板中。在tsx 中，我们经常可以看到这样的写法 ```ts setup() { const header =

this is header

; const renderMain = () =>

this is main

; const renderFooter = () => ; return () => (

{header} {renderMain()} {Math.random() > 0.5 ? renderFooter() : null}

); }, ``` 我们将组件的各个部分通过拆分成了一个个子单元，它可以是一个单独的`vnode`，也可以是一个渲染函数，然后通过 `{}` 表达式嵌入主单元。那么，在混编模式下我们能不能这么做呢? 模板中有`{{}}`表达式，也是接受动态的内容，顺着这个思路，我们可以写出这样的代码: ```ts ``` 然而，渲染出来的结果却是会报错. ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/951ef784aef84e2f9cac1ef9caed1661~tplv-k3u1fbpfcp-watermark.image#?w=1642\&h=504\&s=185630\&e=png\&b=280001) 原因是`{{}}` 与 `{}` 不同，其实是用来渲染动态字符串的，这里传vnode肯定是不行的，那么这里该怎么做呢? 答案是`` `` 这里传的`is`既支持传组件，也支持传`vnode`,所以我们可以这样写。 ```ts ``` 渲染也是正常的 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3152e335ca864b0eb6de28e031f18b43~tplv-k3u1fbpfcp-watermark.image#?w=1064\&h=182\&s=17279\&e=png\&b=ffffff) 所以，之前的Demo也可以这样写 ```ts ``` 之前我们的写法是通过一个将这个片段拆分为一个组件，导致我们在用`css scoped` 方案的时候，必须要用 `:deep()` 去透传一下，而这种写法支持渲染一个`vnode`，所以没有这个限制，也就是说我们写css 可以按照正常的写法去写，即: ```ts ``` 而渲染出的组件也是正常的 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dff60c2cfca40f99ba949808989f8c7~tplv-k3u1fbpfcp-watermark.image#?w=888\&h=110\&s=10877\&e=png\&b=ffffff) 到此为止我们已经能将 `tsx` 和 `css scoped` 完美结合起来了，那还能更优化吗? 我们来看下面这个计数器 `demo`: ```ts // Counter.vue // Parent.vue ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d697971dff0743669e22b142799e04f9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=500\&h=146\&s=9366\&e=png\&b=fefefe) 我们直接将所有的渲染逻辑抽象为一个 `render` 函数，然后在模板部分，只用 ```ts ``` 这样写，这就相当于我们完全实现了在`template setup` 模式中，完全使用`tsx` 去开发，使得`tsx` 可以使用 `defineProps` `defineEmits` 等宏语法的支持；从渲染结果可以看出，点击逻辑可以生效，在我们设置的样式也不需要 `:deep` 加持就能作用到`dom`中；这就是终极黑魔法！😃😃😃 # 总结上面啰啰嗦嗦说了一大堆，其实总结起来就是 * `