注：在setup中只能获取dom但是不能操作dom

<script setup lang="ts">
// 方法一：首先在对应的html元素上的行内中加入ref="masker" //与下面的变量名一致
import { ref } from "vue";
let masker = ref(null);
const showSearchMask = () => {
  // @ts-ignore
  console.log(masker); //可以拿到masker对象，这是被ref包装的对象
  console.log(masker.value); //masker.value = document.getElementsByClassName("xxx")[0]，这是普通的dom对象，但是无法被操作，只能获取并展示
  // @ts-ignore
  console.log(masker.style.transform); //不行，为空
  // @ts-ignore
  masker.value.style.transform = ""; //不行，操作的并不是其style属性
};

// methods中只能用data中的数据，两者与setup没有任何关系，不可能互通！setup相当于beforeCreate，其中的内容可以在Mounted()中使用

// 方法二：
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const showSearchMask = () => {
  console.log(instance?.refs.masker as HTMLDivElement); //等于let masker = ref(null); 的masker
};
</script>