vue中.$refs和ref

在 Vue 中，可以使用 `$refs` 来访问组件或 DOM 元素。而 `ref` 则是用来定义组件或 DOM 元素的标识符，可以在代码中通过 `$refs` 来引用这些组件或 DOM 元素。

具体来说，当我们在模板中给一个元素或组件添加 `ref` 属性时，Vue 会在实例中创建一个名为 `$refs` 的对象，并将这个元素或组件的引用存放在 `$refs` 对象中，该引用可以通过键名来获取。例如：

<template>
  <div>
    <input type="text" ref="input">
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$refs.input.focus()
    }
  }
}
</script>

在上面的例子中，我们给输入框添加了一个 `ref` 属性，并将其命名为 `input`。在 `handleClick` 方法中，我们使用 `this.$refs.input` 来获取这个输入框的引用，并调用其 `focus` 方法，使其获得焦点。

需要注意的是，`$refs` 只在组件渲染完成后才填充，并且它们不是响应式的。因此，应该避免在模板或计算属性中使用 `$refs`。同时，使用 `$refs` 也不太符合 Vue 的数据驱动模式，因此应该优先考虑使用数据来控制视图，而不是依赖 `$refs` 来直接操作 DOM。