Vue3中通过ref获取dom对象

本文主要讨论下Vue3中如何通过ref获取dom对象，这里主要写一下组合式API以及TSX中如何获取.

首先不论何种方法我们都必须要暴露一个ref对象给渲染层，另外渲染层中的ref属性只需要用字面量即可，不要加冒号

组合式API

<template>
<!--注意这里没有冒号-->
<div ref="monacoEditor"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { editor } from 'monaco-editor'
// 请务必写ref
const monacoEditor = ref()
// 注意这里只有onMounted事件后才可以获取
onMounted(() => {
editor.create(monacoEditor.value, {
		value: 'hello world'
	})
})
</script>

TSX

import { defineComponent, onMounted, ref } from 'vue'
import { editor } from 'monaco-editor'

export default defineComponent({
  props: {},
  setup() {
    // 务必写ref
    const monacoEditor = ref()
    onMounted(() => {
      console.log(monacoEditor)
      // 这里获取值要写.value
      editor.create(monacoEditor.value, {
        value: 'hello world'
      })
    })
    // 同理一定要返回，需要暴露给渲染层
    return { monacoEditor }
  },
  render() {
    return (
      <div>
        <!--这里不可以写{}的形式，必须为字符串-->
        <div ref="monacoEditor" style="height:500px"></div>
      </div>
    )
  }
})