在 vue2 中，我們通過 ref 為節(jié)點(diǎn)添加一個(gè)名稱，然后用 this.$refs['節(jié)點(diǎn)名稱'] 就可以獲取到DOM節(jié)點(diǎn)，

例：

<template>
  <div ref='one'>我是節(jié)點(diǎn)</div>   // 添加名稱
</template>

<script>
  mounted() {
    console.log(this.$refs.one) // 獲取到 one DOM 節(jié)點(diǎn)
  }
</script>

在 vue3 中，我們一樣可以通過為節(jié)點(diǎn)添加一個(gè) ref 名稱 ，但是接下來的步驟和 vue2 有些區(qū)別

1.為節(jié)點(diǎn)添加一個(gè) ref 名稱
2.創(chuàng)建 ref 響應(yīng)式常量并且與 DOM 節(jié)點(diǎn)名稱一致 ，且值為 null
3.在 mounted 之后通過 常量的 value 即可獲取到 DOM 節(jié)點(diǎn)

例：

<template>
    <div ref="two">我是節(jié)點(diǎn)</div>
</template>

<script>
  setup() {
      const two= ref(null)
        onMounted(() => {  // 需要在DOM加載完畢之后才可獲取到
          console.log(two.value)
        })
      return { two }
 },
</script>

OK，今天就寫這么多~！