vue3 refs 动态

Vue3中，refs是一种用来获取组件或者DOM元素的引用的方式。在Vue2中，refs使用在组件实例内部来获取子组件或者DOM元素的引用。在Vue3中，refs不仅可以在组件实例内部获取引用，还可以在普通的JavaScript函数或方法内部进行动态地操作。

通过Vue3的ref函数，可以在template和setup函数中创建ref。ref函数接收一个初始值，返回一个响应式对象。

在template中，我们可以通过v-bind将refs绑定到dom元素上：

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

在setup函数中，我们可以通过ref来获取引用或者动态设置引用：

import { ref } from 'vue'

export default {
  setup() {
    const inputRef = ref(null);

    const handleClick = () => {
      inputRef.value.focus(); //获取引用
      inputRef.value = null; //改变引用
    }

    return {
      inputRef,
      handleClick
    }
  }
}

在这个例子中，我们创建了一个名为inputRef的ref，并在handleClick函数中动态地设置了引用和获取了引用。

总之，Vue3的refs动态能够让我们在JavaScript函数和方法中动态地获取和修改引用，极大地提升了开发效率和代码灵活性。