解决vue使用tsx中在steup返回获取不到dom元素

解决vue使用tsx中在steup返回获取不到dom元素

vue2版本的写法

import {defineComponent, onMounted, ref} from '@vue/composition-api'

export default defineComponent({

    setup() {
        const barRef = ref<HTMLElement | null>(null)

        onMounted(() => {
            console.log(barRef.value, 'barRef.vallllllllllllll')
        })

        return {
            barRef
        }
    },
    render() {
        return (
            <div class="bar" ref={'barRef'}></div>
        )
    },
})

vue3版本的写法

import {defineComponent, onMounted, ref} from '@vue/composition-api'

export default defineComponent({

    setup() {
        const barRef = ref<HTMLElement | null>(null)

        onMounted(() => {
            console.log(barRef.value, 'barRef.vallllllllllllll')
        })

        return {
            barRef
        }
    },
    render() {
        return (
            <div class="bar" ref={(el) => this.barRef = el}></div>
        )
    },
})

效果