vue3 setup模板语法如何获取dom

在 Vue3 中，可以使用 `ref` 和 `reactive` 来获取和操作 DOM。

1. 使用 `ref` 获取 DOM 元素

<template>
  <div>
    <button ref="myButton" @click="handleClick">点击</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myButton = ref(null);

    function handleClick() {
      console.log(myButton.value); // 获取 DOM 元素
      myButton.value.innerText = '已点击'; // 操作 DOM 元素
    }

    return {
      myButton,
      handleClick
    };
  }
};
</script>

2. 使用 `reactive` 获取 DOM 元素

<template>
  <div>
    <button ref="myButton" @click="handleClick">点击</button>
  </div>
</template>

<script>
import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      myButton: null
    });

    function handleClick() {
      console.log(state.myButton); // 获取 DOM 元素
      state.myButton.innerText = '已点击'; // 操作 DOM 元素
    }

    onMounted(() => {
      state.myButton = document.querySelector('#myButton');
    });

    return {
      handleClick
    };
  }
};
</script>