本文介绍: 在 Vue 3 的 Composition API 中被引入,它主要用于创建响应对象,尤其是用于包装基本数据类型响应对象。虽然都用于创建响应对象,但它们在设计和用途上有一些区别,适用于不同场景。它接受一个普通对象,并返回一个代理对象,该代理对象中的属性都是响应式的。是用于创建响应数据两个不同的 API。的设计初衷是为了确保在模板使用变量时能够区分变量本身和它的值。就足够了,但当处理复杂数据结构时,尤其是需要进行深层次的数据操作时,这是 Vue 3 的一个改进,旨在提供更自然的语法

Ref 与reactive

在 Vue 3 中,reactiveref用于创建响应式数据的两个不同的 API。它们都是 Vue 3 Composition API 的一部分

ref

ref 用于创建一个包基本数据类型的响应式对象。它接受一个初始值,并返回一个包value 属性的对象。ref 主要用于包装基本数据类型,如数字字符串等。

import { ref } from 'vue';

const count = ref(0);

// 读取值
console.log(count.value); // 输出: 0

// 修改
count.value += 1;
console.log(count.value); // 输出: 1

reactive

reactive 用于创建一个包装普通对象的响应式对象。它接受一个普通对象,并返回一个代理对象,该代理对象中的属性都是响应式的。

import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 30,
});

// 读取值
console.log(user.name); // 输出: John

// 修改
user.age += 1;
console.log(user.age); // 输出: 31

区别

  1. 数据类型

  2. 访问属性:

  3. 用例

import { ref, reactive } from 'vue';

// 使用 ref
const count = ref(0);
count.value += 1;

// 使用 reactive
const user = reactive({
  name: 'John',
  age: 30,
});
user.age += 1;

为什么同时存在 ref()、reactive()?

refreactive 虽然都用于创建响应式对象,但它们在设计和用途上有一些区别,适用于不同场景理解这些差异有助于更好选择合适的 API。

  1. 单一值 vs. 对象:

    const count = ref(0); // 单一值
    const user = reactive({ name: 'John', age: 30 }); // 对象
    
  2. 访问方式

    // 使用 ref
    count.value += 1;
    
    // 使用 reactive
    user.age += 1;
    
  3. 响应式原理

  4. 用例场景

import { ref, reactive } from 'vue';

// 使用 ref
const count = ref(0);
count.value += 1;

// 使用 reactive
const user = reactive({ name: 'John', age: 30 });
user.age += 1;

虽然在某些简单场景中使用 ref 就足够了,但当处理复杂的数据结构时,尤其是需要进行深层次的数据操作时,reactive 提供了更强大的功能选择使用哪个 API 取决于你的具体需求项目复杂性。

ref与普通变量的区别

ref 在 Vue 3 的 Composition API 中被引入,它主要用于创建响应式对象,尤其是用于包装基本数据类型的响应式对象。相比于普通变量,ref 具有一些特别的支持行为

  1. 响应式变化检测

  2. .value 访问和修改:

    • 在使用 ref 创建的响应式对象中,需要通过 .value 访问和修改值。

    • 这是因为 ref设计初衷是为了确保在模板中使用变量时能够区分变量本身和它的值。因此,直接操作 ref 对象会导致一些问题,必须使用 .value

      const count = ref(0);
      console.log(count.value); // 读取值
      count.value += 1; // 修改值
      
  3. 自动解包

  4. ref 函数

    • ref 函数是 Vue 3 提供的 API,用于创建一个包基本数据类型的响应式对象。这个函数的使用方式使得 Vue 能够更轻松地追踪数据的变化。
    • 普通变量在 Vue 2 中不具备这种直接的响应式支持,需要额外处理来使其响应式。

注意
在 Vue 3 中当你将 ref 对象传递模板<template>)中时,会自动解包,无需额外使用 .value。这是 Vue 3 的一个改进,旨在提供更自然的语法

以下是一个示例演示了在模板中传递和使用 ref 对象的情况:

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>Parent Component: {{ myRef }}</p>
    <ChildComponent :childRef="myRef" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const myRef = ref('Hello from Parent');
    return {
      myRef,
    };
  },
};
</script>
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Child Component: {{ childRef }}</p>
    <button @click="updateValue">Update in Child</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    childRef: {
      type: Object,
      required: true,
    },
  },
  methods: {
    updateValue() {
      // 在子组件通过 .value 修改值
      this.childRef.value = 'Updated in Child';
    },
  },
});
</script>

原文地址:https://blog.csdn.net/study_way/article/details/134758527

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_29574.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注