$refs 怎样响应式

要使 `$refs` 在 Vue 中响应式，你需要使用 `ref` 函数将其绑定到一个响应式的变量上。下面是一个示例：

首先，在 Vue 模板中使用 `ref` 将 `$refs` 绑定到一个变量上：

<template>
  <div>
    <span ref="myRef">{{ message }}</span>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

然后，在 Vue 组件中，使用 `reactive` 函数将 `myRef` 变量包装成响应式对象：

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

export default {
  setup() {
    const myRef = ref(null);
    const data = reactive({
      message: 'Hello, World!'
    });

    const updateMessage = () => {
      data.message = 'Updated Message';
      console.log(myRef.value); // Access the DOM element using myRef.value
    };

    return {
      myRef,
      message: data.message,
      updateMessage
    };
  }
};
</script>

现在，当 `message` 发生变化时，`$refs.myRef` 将会自动更新。你可以通过访问 `myRef.value` 来获取 DOM 元素。确保在访问 `myRef.value` 之前，组件已经被渲染并且 DOM 元素已经被创建。

这样，你就可以通过 `$refs` 对象来访问和操作 DOM 元素，并且保持响应式更新。