vue3使用ref和$refs

在 Vue 3 中，ref 和 $refs 都有了一些变化。

ref：
在 Vue 3 中，ref 不再是一个对象，而是一个函数。我们使用 ref 函数来创建 ref 对象。

import { ref } from 'vue'

const count = ref(0)

在上面的代码中，我们使用 ref 函数创建了一个名为 count 的 ref 对象，并将它的初始值设置为 0。

$refs：
在 Vue 3 中，$refs 仍然可以用来访问组件中的 DOM 元素，但是要注意的是，$refs 中的属性不再是一个对象，而是一个 ref 对象。

<template>
  <div ref="myDiv">Hello World</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)

    return {
      myDiv
    }
  },
  mounted() {
    console.log(this.$refs.myDiv.value)
  }
}
</script>

在上面的代码中，我们首先在模板中使用 ref 属性给 div 元素命名为 myDiv。然后在 setup 函数中，我们使用 ref 函数创建了一个名为 myDiv 的 ref 对象，并将它的初始值设置为 null。最后，我们将 myDiv 对象返回给组件的模板，这样就可以在模板中使用 myDiv.value 来访问 div 元素了。在 mounted 钩子中，我们使用 this.$refs.myDiv.value 来访问 myDiv 对象，从而获取 div 元素的引用。

需要注意的是，在 Vue 3 中，$refs 中的属性只有在组件挂载之后才能访问。因为在组件挂载之前，DOM 元素还没有被创建，所以 $refs 中的属性是 undefined。