[Question] tsx FunctionalComponent 希望可以实现所有生命周期与api的正常使用

[Charlie500]

🧐 tsx中以后有望实现函数式语法吗，并且是支持所有生命周期和API的，以下的写法中生命周期是不能生效的，如果是setup形式，定义类型又会变得复杂化，不能使用范型进行类型声明，想要实现一个范型函数式组件以解决组件的高互用性，以脱离模版语法的限制

import { CSSProperties, FunctionalComponent, onMounted, watch } from 'vue'

interface Props {
 count: number
 style?: CSSProperties
}
type Emit = {
 childClick: () => void
}

const Child: FunctionalComponent<Props, Emit> = (props, ctx) => {
 const { count, ...rest } = props
 const { slots, emit } = ctx
 //   console.log('slots', slots)
 onMounted(() => {
   console.log('child mounted')
 })

 watch(
   () => count,
   () => {
     console.log('child watch count', count)
   }
 )
 return (
   <div {...rest}>
     {slots?.header && slots.header()}
     <button onClick={() => emit('childClick')}>Child Count++</button>
     <p>Child count is: {count}</p>
     {slots?.default && slots.default()}
     <p>Props' keys are: {Object.keys(props).join(', ')}</p>
   </div>
 )
}
export default Child

期待作者的回复～
@tangjinzhou

[liujiayii]

顶顶 为什么关闭了呢 @Charlie500