vue3 tsx中使用hook

代码

• 使用方组件

import { defineComponent, PropType, h, computed, ref, watch } from 'vue';

import useMyHooks from './hooks/useMyHooks';

export default defineComponent({
    setup(props, { slots }) {
        const { count, increment, decrement } = useMyHooks();
        return () => {
            return (
                <>
                    <div>
                        <div>{count.value}</div>
                        <button onClick={() => increment()}>more</button>
                        <button onClick={() => decrement()}>less</button>
                    </div>
                </>
            );
        };
    }
});

• useMyHooks.ts

import { ref, watch } from 'vue';

export default function useMyHooks() {
    const count = ref(0);

    watch(count, (val) => {
        console.log('count changed: ', val);
    });

    return {
        count,
        increment() {
            count.value++;
        },
        decrement() {
            count.value--;
        }
    };
}