Vue3 动态设置 ref

在Vue 3中，可以使用ref函数来创建响应式的引用对象。如果需要动态地创建多个ref，可以使用一个函数来返回新的ref实例，并存储在一个响应式对象中。

以下是一个简单的例子，展示了如何在Vue 3中动态设置ref：

<template>
  <div>
    <div v-for="(input, index) in inputs" :key="index">
      <input v-model="input.value" />
    </div>
    <button @click="addInput">Add Input</button>
  </div>
</template>
 
<script>
import { ref, reactive } from 'vue';
 
export default {
  setup() {
    const inputs = reactive({});
 
    function addInput() {
      const newInput = ref('');
      inputs[`input${Object.keys(inputs).length}`] = newInput;
    }
 
    return {
      inputs,
      addInput,
    };
  },
};
</script>

在这个例子中，我们使用了一个响应式对象inputs来存储所有动态创建的ref。每次点击按钮时，addInput函数会被调用，创建一个新的ref并将其添加到inputs对象中。在模板中，我们使用v-for来遍历inputs对象，为每个ref创建一个input元素。