vue3动态ref绑定 获取ref

Vue 3中的动态`ref`绑定是用来创建可变的引用，当你希望在运行时根据条件或数据变化来改变绑定的目标时，动态`ref`非常有用。它允许你在模板中动态地引用和操作组件实例的属性。

以下是如何使用动态`ref`的简单示例：

<template>
  <div>
    <input v-model="value" />
    <button @click="toggleValue">Toggle Value</button>
    <p>Value: {{ currentValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Hello',
      dynamicRef: null,
    };
  },
  methods: {
    toggleValue() {
      // 当 value 改变时，我们动态地更新 ref
      if (this.value === 'Hello') {
        this.dynamicRef = ref('world');
      } else {
        this.dynamicRef = null; // 或者设置为其他 ref
      }
      // 使用当前的 ref 值（如果存在）
      this.currentValue = this.dynamicRef ? this.dynamicRef.value : 'Not Bound';
    },
  },
};
</script>

在这个例子中，当`toggleValue`被点击时，如果`value`是'Hello'，就创建一个新的`ref`绑到`world`；如果不是，就解绑。`currentValue`会反映出`dynamicRef`是否已绑定以及其值。