【Vue】toRef与toRefs

在 Vue 3 中，ref 和 refs 是与响应式数据相关的概念，用于处理组件中的数据和 DOM 元素。

1. ref:
   ref 是一个函数，用于创建响应式对象。它接收一个参数，该参数可以是任意 JavaScript 数据类型，然后返回一个具有 value 属性的对象。这个对象是响应式的，当 value 属性发生变化时，与之相关的视图会被更新。

import { ref } from 'vue';

// 创建一个 ref
const myValue = ref('Hello');

// 获取 ref 的值
console.log(myValue.value); // 输出 'Hello'

// 修改 ref 的值
myValue.value = 'Vue 3 is awesome!';

2. refs:
   refs 是一个对象，用于存储组件中所有带有 ref 特性的 DOM 元素或子组件的引用。每个引用的名称对应于 ref 特性的值。

<template>
  <div>
    <!-- 使用 ref 指定引用名称 -->
    <input ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个 ref 来存储 input 元素的引用
    const myInput = ref(null);

    // 在组件挂载后，聚焦 input 元素
    onMounted(() => {
      myInput.value.focus();
    });

    // 提供给模板的方法，用于聚焦 input 元素
    const focusInput = () => {
      myInput.value.focus();
    };

    return {
      myInput,
      focusInput
    };
  }
}
</script>