Vue3 面试题 | 13.精选 Vue3 面试题(ref)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

对比下vue3中的ref、toRef、toRefs

在 Vue 3 中，ref、toRef和toRefs都是用于获取和操作组件实例的属性和方法的。

• ref：用于获取组件实例的引用。通过在模板中使用ref属性，可以将组件实例的引用保存到一个变量中，以便在 JavaScript 代码中操作该实例。

• toRef：用于将一个对象或数组的属性转换为一个响应式的ref对象。通过toRef，可以将一个非响应式的对象或数组的属性转换为响应式的ref对象，从而可以在模板中使用该属性的引用。

• toRefs：用于将一个对象的所有属性转换为响应式的ref对象。通过toRefs，可以将一个非响应式的对象转换为一个包含其所有属性的响应式ref对象的对象，从而可以在模板中使用这些属性的引用。

以下是一个示例，演示了如何使用ref、toRef和toRefs：

<template>
  <div>
    <h2>使用 ref</h2>
    <input v-model="inputValue" ref="inputRef">
    <button @click="getValue">获取输入框的值</button>

    <h2>使用 toRef</h2>
    <p>姓名：{{ person.name }}（{{ person.age }} 岁）</p>
    <button @click="changeName">修改姓名</button>

    <h2>使用 toRefs</h2>
    <p>姓名：{{ personRef.name }}（{{ personRef.age }} 岁）</p>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      person: {
        name: 'John Doe',
        age: 30
      },
      personRef: {}
    };
  },
  methods: {
    getValue() {
      const input = this.$refs.inputRef.value;
      alert(`输入框的值为：${input}`);
    },
    changeName() {
      this.person.name = 'Jane Doe';
    },
    changeAge() {
      this.personRef.age = 40;
    }
  },
  created() {
    this.personRef = toRefs(this.person);
  }
};
</script>

在上面的示例中，我们演示了如何使用ref、toRef和toRefs：

• 在h2标题为"使用 ref"的部分，我们使用ref属性获取了input元素的引用，并将其存储在inputRef变量中。然后，我们可以在getValue方法中通过this.$refs.inputRef.value获取输入框的值。
• 在h2标题为"使用 toRef"的部分，我们使用toRef将person.name属性转换为一个响应式的ref对象，并将其存储在person.nameRef变量中。然后，我们可以在模板中通过{{ person.name }}（{{ person.age }} 岁）来显示姓名和年龄。当点击"修改姓名"按钮时，我们可以通过this.person.name = 'Jane Doe'来修改姓名。
• 在h2标题为"使用 toRefs"的部分，我们使用toRefs将person对象转换为一个包含所有属性的响应式ref对象，并将其存储在personRef变量中。然后，我们可以在模板中通过{{ personRef.name }}（{{ personRef.age }} 岁）来显示姓名和年龄。当点击"修改年龄"按钮时，我们可以通过this.personRef.age = 40来修改年龄。

需要注意的是，在 Vue 3 中，ref、toRef和toRefs都是用于获取和操作组件实例的属性和方法的。具体使用哪种方式取决于你的需求和代码结构。

toRefs：将响应式对象转换成普通对象，对象的每个属性都是对应的ref？

toRefs 是 Vue 3 中的一个函数，它用于将一个响应式对象转换为一个普通对象，其中每个属性都是对应的 ref 对象。

ref 对象是 Vue 3 中用于访问和操作组件实例的属性和方法的一种方式。通过 toRefs 函数，我们可以将一个响应式对象的每个属性转换为一个 ref 对象，从而可以在模板中直接使用这些属性的引用。

以下是一个示例，演示了如何使用 toRefs 函数：

<template>
  <div>
    <h2>使用 ref</h2>
    <input v-model="inputValue" ref="inputRef">
    <button @click="getValue">获取输入框的值</button>

    <h2>使用 toRefs</h2>
    <p>姓名：{{ personRef.name }}（{{ personRef.age }} 岁）</p>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      person: {
        name: 'John Doe',
        age: 30
      }
    };
  },
  methods: {
    getValue() {
      const input = this.$refs.inputRef.value;
      alert(`输入框的值为：${input}`);
    },
    changeName() {
      this.personRef.name = 'Jane Doe';
    }
  },
  created() {
    this.personRef = toRefs(this.person);
  }
};
</script>

在上面的示例中，我们使用 toRefs 函数将 person 对象转换为一个包含每个属性的 ref 对象。然后，我们可以在模板中使用这些 ref 对象来访问和操作对象的属性。

需要注意的是，toRefs 函数返回的 ref 对象是不可变的，因此不能直接修改它们的值。如果需要修改对象的属性，需要使用相应的方法或在组件的 data 选项中进行修改。

解释一下什么是响应式对象和普通对象。

在 Vue 中，响应式对象和普通对象是两种不同类型的对象。

普通对象是指简单的 JavaScript 对象，它们不具有响应式能力。在 Vue 中，可以使用普通对象来存储数据，但它们不会随着数据的变化自动更新视图。

响应式对象是指在 Vue 中使用 Vue.reactive() 方法创建的对象。响应式对象具有响应式能力，当它们的属性发生变化时，Vue 会自动更新相应的视图。响应式对象的属性可以是任何类型的值，包括对象、数组和基本类型。

响应式对象的优点是可以简化代码，因为它们自动处理数据的变更，无需手动编写代码来更新视图。响应式对象也可以用于在组件之间共享数据，因为它们可以在多个组件之间保持数据的同步。

总的来说，响应式对象是 Vue 中一种强大的工具，可以帮助开发人员更高效地管理数据和更新视图。

在 Vue 3 中，如何使用 ref 对象和 toRefs 函数？

在 Vue 3 中，ref 对象和 toRefs 函数可以用于访问和操作组件实例的属性和方法。

ref 对象用于在模板中访问组件实例的属性和方法。你可以使用 ref 来获取一个组件实例的引用，并通过该引用访问其属性和方法。例如：

<template>
  <MyComponent ref="myComponentRef" />
</template>

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

export default {
  methods: {
    getValue() {
      const value = this.$refs.myComponentRef.value;
      // 在此处使用 value
    }
  }
};
</script>

在上面的示例中，我们使用 ref 来获取 MyComponent 组件实例的引用，并将其存储在 myComponentRef 变量中。然后，我们可以在 getValue 方法中通过 this.$refs.myComponentRef.value 来访问 MyComponent 组件实例的 value 属性。

toRefs 函数用于将一个响应式对象转换为一个包含其属性的 ref 对象。这对于在模板中直接使用响应式对象的属性非常有用。例如：

<template>
  <p>姓名：{{ personRef.name }}（{{ personRef.age }} 岁）</p>
</template>

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

export default {
  data() {
    return {
      person: {
        name: 'John Doe',
        age: 30
      }
    };
  },
  created() {
    this.personRef = toRefs(this.person);
  }
};
</script>

在上面的示例中，我们使用 reactive 创建了一个响应式对象 person，并使用 toRefs 将其转换为一个包含其属性的 ref 对象。然后，我们将 personRef 存储在组件实例中，并在模板中直接使用 personRef.name 和 personRef.age 来访问响应式对象的属性。

需要注意的是，ref 对象和 toRefs 函数在 Vue 3 中是基于 Composition API 的，因此需要在 Composition API 中使用它们。如果你使用的是 Options API，则需要使用其他方法来访问和操作组件实例的属性和方法。