首先，为什么选用tsx的开发模式，首先学习react的人应该会对这个语法很熟悉（咱也不知道为啥这么的相近。。。），但是对于js的编码和一些无状态的组件是真的好用，用完后就一个词形容就是真的很灵活，最好是先看官方文档，我是补充一些官方没有提及或者不好找的东西。
一、首先需要先知道vue3的tsx文件基础的架构
export default defineComponent({
name: 'frontPage',
setup() {
return () => {
return <div>
</div>
}
}
})
vue组件的基本写法，其实从结构就能看出来是将所有的内容封装在了一起，我第一感觉就是会很有利于无状态的组件和低代码平台使用
常用的一些钩子语法我这儿就不叙述了，文档写的很详细
例如：onMounted(() => {})之类的和生命周期的顺序，后面也许会从源码角度进行解析
值得一提的是vue3没有过滤器了，但是是可以用计算属性去进行平滑过度的
// 无参数
const x = computed(() => {
})
// 有参数
const x = computed(() => {
return (a1,a2) => {
}
})
有参数对应的传参 x.value(a1,a2)
二、常用的语法
我就直接写tsx里面是咋用的了，vue2或者模版这个应该大家相当熟悉了
if: {a === b ? a : b}
for: { a.map(item => {
return <div>item.a</div>
}) }
事件：
<div onClick={aaa}><div> // 无参数
<div onClick={() => aaa('b')}><div> // 有参数
<div onClick={(e) => aaa(e)}><div> // 拿当前点击元素的
UI框架的：
我用的是vant3的框架，里面会有一些API是这样的：v-model:show
tsx是不支持这种写法的，可以自己转换下 v-model={[数据data, 'show']}
三、组件传值
1、这个应该是最常见的了，也是最广泛的了，父子组件之间的传值：
父：
<div aa={a} onPp={(e) => ff(e)}></div>
子：
export default defineComponent({
name: 'frontPage',
props: {
aa: Object // 这儿必须接收
},
setup(props,context) {
const { data } = props // 只是接受了值，但是不是响应式的
const { data } = toRefs(props) as any // 响应式处理
// context这个参数里面包含了一大堆的属性，具体参照文档使用,在这儿我只用下传值
const aa = () => {
context.emit(pp('p'))
}
return () => {
return <div onClick={aa}>
</div>
}
}
})
2、provide/inject也是支持的
这个属性的话，用的相对较少，我是觉得不太好用，用这个还不如直接用vuex
当然也有一些地方会比较适合，因为vue3淡化了this的使用
这个一般我一般是用来配合做事件总线，或者就是全局的公共的一些方法
main.ts文件进行定义
const app = createApp(App)
// 事件总线(这个是一个插件，可以自行查阅下)
app.provide('mitter', mitt())
// 全局方法
app.provide('$Cookies', Cookies)
使用的文件：
const $Cookies = inject('$Cookies') as any
$Cookies.set()
const $bus = inject('mitter')
$bus.emit('ButtonSetup')
补充：还有一个就是可以自己自定义插件的时候进行使用，但是我是觉得有点儿虎
3、Vuex
这个大家应该就很熟悉了，我项目是vuex进行了下分模块儿，然后存数据，取数据都和之前的差不是很多
这个就不详细的说了，官方写的超级详细，推荐是使用状态管理的插件去使用，具体有什么作用，逼格高。这块儿我后续已经替换成pinia了，后面在各种工具总结下和大家聊聊。
感觉也都基本都够了，没有提及或者有其他的大家也可以和我说，我补充下，可能一下子想不到那么全面或者就是用过去用的少就没注意
