是否在使用Nuxt3时遇到过使用其他UI库，导致客户端和服务端渲染不匹配。那么你应该试着自己上用TSX写组件，可能你会觉得H函数，不太好看。那么接下来试试我的示例吧。
废话不多说，直接上手：
<script lang="tsx" setup>
const visible = ref(false);
setTimeout(() => {
visible.value = true;
}, 200);
const start = ()=>{
return <div>
start
</div>
}
const end = ()=>{
return <div>
end
</div>
}
const temp = () => {
return <div>
{start()}
<h1>Level 01/Page 01</h1>
<input type="text" />
{end()}
</div>
}
</script>
<template>
<temp v-if="visible"/>
<!-- <div v-if="visible">
<h1>Level 01/Page 01</h1>
<input type="text" />
</div> -->
</template>
- 这样看上去是否一样就看出来了，该怎么使用了？
- 可能会有杠精觉得，直接这样的话，那直接用react不香嘛
- 个人观点哈，react的副作用闭包问题，难道每次写一个页面的时候我都要在写一次，或则在注意一次，我们都是打工人，怎么开发来的快，能够构造复杂且大型的应用就行了。至于过程不重要。
- 为什么要使用tsx，因为往往构建大型项目时，我们需要规定好字段类型啊，不然类型从开头的类型改变了，那么你还去转换一下？什么时候转换，你都不知道，但是类型静态检测很棒啊，从interface or type的时候你就决定了，这是一个什么类型，除非你想让他滚开 as 断言
