vue中的ref toRef toRefs的作用以及区别

1.ref

Vue2中ref 主要用于访问子组件、DOM 元素或其他 Vue 实例

① 在 Vue 2 中，ref 主要有三种用法：

（1）访问子组件

<template>
  <child-component ref="childRef"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    // 通过 this.$refs 访问子组件实例
    this.$refs.childRef.someMethod(); // 调用子组件的方法
  }
}
</script>

（2）访问 DOM 元素

ref 用来辅助开发者在不依赖 jQuery 的情况下，获取DOM元素或组件的引用。

<template>
  <div ref="myElement">DOM element</div>
</template>

<script>
export default {
  mounted() {
    // 通过 this.$refs 访问 DOM 元素
    this.$refs.myElement.innerText = 'Updated text';
  }
}
</script>

（3）vue实例

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象。

<template>
  <div ref="otherComponent"></div>
</template>

<script>
export default {
  mounted() {
    // 通过 this.$refs 访问其他 Vue 实例
    this.$refs.otherComponent.someMethod(); // 调用其他组件的方法
  }
}
</script>

注意事项：

1. 在组件渲染完成后（mounted 钩子函数触发后），才能通过 this.$refs 访问到 ref 引用的内容。
2. 使用 ref 可能会破坏 Vue 的响应式系统，所以尽量在需要时才使用，而不是作为数据绑定的替代品。

这些是在 Vue 2 中使用 ref 的基本示例。

---

vue3中ref 的作用与 Vue 2 中类似，主要用于管理和访问响应式数据。然而，在 Vue 3 中，ref 不再用于访问子组件、DOM 元素或其他 Vue 实例，而是专门用于创建响应式引用，它可以引用任何值，包括 DOM 元素、对象或基本数据类型。

② 在 Vue 3 中，ref 主要有两种用法：

（1）**在模板中引用 DOM 元素：通过 ref 属性在模板中标记一个元素，并在 setup 函数中通过 ref 函数创建一个响应式的引用。这个引用在组件被挂载后会指向相应的 DOM 元素。

<template>
  <div ref="divElement"></div>
</template>

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

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

    onMounted(() => {
      console.log(divElement.value); // 访问 DOM 元素
    });

    return {
      divElement
    };
  }
};
</script>

（2）**在 setup 函数中引用响应式数据：ref 也可以用于在 setup 函数中创建一个响应式的引用，它可以引用任何值（包括对象和基本数据类型）。当这个值改变时，视图会相应地更新。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

③ vue2与vue3中ref的区别：

作用域：在 Vue 3 的 Composition API 中，ref 是在 setup 函数的作用域内定义的，而不是像 Vue 2 那样在组件实例的作用域内。

响应式：在 Vue 3 中，ref 总是返回一个响应式的引用，即使它引用的是一个基本数据类型。在 Vue 2 中，ref 主要用于引用 DOM 元素或子组件实例，并不提供响应式功能。

使用方式：在 Vue 3 中，你需要通过 .value 来访问或修改 ref 引用的值。在 Vue 2 中，你可以直接通过 this.$refs 访问 DOM 元素或子组件实例。

Composition API：Vue 3 引入了 Composition API，允许你使用 ref 和其他响应式 API 在函数组件中编写逻辑。这是 Vue 2 所不支持的。

2.toRef

toRef 是 Vue 3 Composition API 中的一个函数，它的主要作用是将响应式对象（通常是通过 reactive 创建的）上的某个属性转换为一个独立的、可响应的
ref。这样，你就可以在不改变原始响应式对象结构的情况下，对该属性进行单独的操作和监听。

toRef 的作用

• 保持响应性：通过 toRef 创建的 ref 仍然保持响应性，即当该 ref 的值发生变化时，视图会自动更新
• 避免解构响应式对象：在解构响应式对象时，解构出来的属性将失去响应性。而使用 toRef 可以避免这种情况，让你能够安全地访问和操作响应式对象的属性。
• 与原始对象保持同步：通过 toRef 创建的 ref 与原始响应式对象上的属性保持同步。即当你修改 ref 的值时，原始对象上的属性也会相应地更新。

如何使用 toRef

toRef 的使用非常简单，它接受两个参数：第一个参数是原始响应式对象，第二个参数是该对象上要转换为 ref 的属性名。以下是一个示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue 3!'
    });

    // 使用 toRef 将 state.message 转换为一个独立的 ref
    const message = toRef(state, 'message');

    function updateMessage() {
      // 修改 ref 的值，原始对象 state 上的 message 属性也会相应地更新
      message.value = 'Hello again, Vue 3!';
    }

    return {
      message,
      updateMessage
    };
  }
};
</script>

在上面的示例中，我们首先使用 reactive 创建了一个响应式对象 state，该对象有一个属性 message。然后，我们使用 toRef 将 state.message 转换为一个独立的 ref，并将其赋值给 message 常量。在模板中，我们使用 message.value 来显示消息，并通过一个按钮来触发 updateMessage 方法更新消息。当你点击按钮时，message.value 的值会更新，同时 state.message 的值也会相应地更新，因为它们之间保持同步。

3.toRefs

toRefs 是 Vue 3 Composition API 中的一个实用函数，它可以将一个响应式对象（通常是由 reactive 创建的）转换为一个普通对象，该对象的每个属性都是指向原始对象相应属性的 ref。这样做的好处是，你可以在模板中直接使用这些属性，而不需要每次都通过 .value 来访问它们。

toRefs 的作用

• 简化模板中的访问：在模板中，你可以直接访问 toRefs 返回对象的属性，而不需要使用 .value。
• 保持响应性：虽然 toRefs 返回的是普通对象，但其中的属性仍然是响应式的。当这些属性的值改变时，Vue 将能够正确地更新视图。

如何使用 toRefs

（1）定义响应式对象：首先，你需要一个响应式对象。这通常是通过 reactive 函数创建的。

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue 3'
});

（2）使用 toRefs：然后，你可以使用 toRefs 函数来转换这个响应式对象。

import { toRefs } from 'vue';

const refs = toRefs(state);

此时，refs 是一个普通对象，它包含两个属性：count 和 name。但是，这两个属性不是普通的 JavaScript 值，而是 ref 对象。这些 ref 对象与 state 对象中的原始属性是“引用”关系。

（3）在模板中使用：你可以在模板中直接访问 refs 的属性，而不需要使用 .value。

<template>
  <div>
    <p>{{ count }}</p> <!-- 直接使用 count，而不是 count.value -->
    <p>{{ name }}</p> <!-- 直接使用 name，而不是 name.value -->
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue 3'
    });

    const refs = toRefs(state);

    return {
      ...refs // 使用解构赋值或扩展运算符将 refs 对象的属性展开到 setup 的返回对象中
    };
  }
};
</script>

注意，在 setup 函数的返回对象中，我们使用扩展运算符 …refs 将 refs 对象的所有属性展开并返回。这样，在模板中我们就可以直接使用这些属性了。