是否在使用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 断言

这个文章只是启发一下大家，因为看了很多UI库，实在不忍心，贡献代码的话，说实话，只想早点下班，看看就好