Vue 3中ref和reactive的区别

news2024/12/26 14:52:16

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1️⃣ ref
  - 2️⃣ reactive
  - 3️⃣ ref与reactive对比
- 总结：
- 参考资料：

摘要：

本文将详细介绍Vue 3中ref和reactive的区别，探讨它们的使用场景和优缺点。

引言：

在Vue 3中，响应式系统是其核心特性之一。Vue 3提供了两种方法来实现响应式数据：ref和reactive。本文将对比分析这两种方法，帮助大家更好地理解它们的特点和适用场景。

正文：

1️⃣ ref

定义：ref用于创建一个响应式的数据对象。它通常用于创建基本数据类型的响应式数据。
使用方法：通过调用ref函数并传入一个初始值来创建一个响应式数据对象。在模板中访问时，ref对象会自动解构，无需通过.value属性访问。
特点：ref对象在模板中自动解构，方便使用；同时，ref也可以用于创建复杂对象的响应式数据。

以下是一些简单的 ref 代码案例：

创建一个 ref：

const count = ref(0);

通过 ref 访问 DOM 元素：

const input = ref(null);
console.log(input.value); // 输出：null

在模板中使用 ref：

<template>
  <div>
    <input ref="input" v-model="count" />
    <button @click="handleClick">Click me</button>
  </div>
</template>

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

    function handleClick() {
      console.log(count.value); // 输出：1
    }

    return {
      count,
      handleClick,
    };
  },
};
</script>

在生命周期钩子中使用 ref：

import { ref, onMounted } from 'vue';

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

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

    onMounted(() => {
      console.log(count.value); // 输出：0
    });

    return {
      count,
      handleClick,
    };
  },
};

这些案例展示了 ref 在 Vue.js 中的基本用法。ref 是 Vue.js 3.x 中一个新的响应式系统，它允许我们更灵活地操作 DOM 和管理状态。

2️⃣ reactive

定义：reactive用于创建一个响应式的对象。它通常用于创建复杂对象的响应式数据。
使用方法：通过调用reactive函数并传入一个对象来创建一个响应式数据对象。在模板中访问时，需要通过对象属性访问。
特点：reactive适用于创建复杂对象的响应式数据；同时，reactive对象在模板中不会自动解构，需要通过对象属性访问。

以下是一些简单的 reactive 代码案例：

创建一个 reactive 对象：

const state = reactive({
  count: 0,
  message: 'Hello, Vue!'
});

修改 reactive 对象：

state.count++; // 自动触发视图更新
state.message = 'Hello, reactive!'; // 自动触发视图更新

在模板中使用 reactive 对象：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, Vue!'
    });

    function handleClick() {
      state.count++;
      state.message = 'Hello, reactive!';
    }

    return {
      state,
      handleClick
    };
  },
};
</script>

在生命周期钩子中使用 reactive 对象：

import { reactive, onMounted } from 'vue';

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

    function handleClick() {
      state.count++;
      state.message = 'Hello, reactive!';
    }

    onMounted(() => {
      console.log(state.count); // 输出：0
      console.log(state.message); // 输出：Hello, Vue!
    });

    return {
      state,
      handleClick
    };
  },
};

这些案例展示了 reactive 在 Vue.js 中的基本用法。reactive 是 Vue.js 3.x 中一个新的响应式系统，它允许我们更灵活地操作 DOM 和管理状态。

3️⃣ ref与reactive对比

使用场景：ref适用于创建基本数据类型和复杂对象的响应式数据；reactive适用于创建复杂对象的响应式数据。
自动解构：ref在模板中自动解构，方便使用；reactive不会自动解构，需要通过对象属性访问。
适用性：ref可以用于创建基本数据类型和复杂对象的响应式数据，更加灵活；reactive适用于创建复杂对象的响应式数据，更加专注。

以下是 ref 和 reactive 的对比表格：

特性	ref	reactive
定义	用于创建一个响应式的数据对象，通常用于基本数据类型	用于创建一个响应式的对象，通常用于复杂对象
使用方法	调用`ref`函数并传入初始值	调用`reactive`函数并传入对象
模板访问	自动解构，无需`.value`	不自动解构，需通过对象属性访问
适用场景	基本数据类型和复杂对象	复杂对象
自动解构	在模板中自动解构	不自动解构
适用性	灵活，可用于多种数据类型	专注，适用于复杂对象
用途	创建基本数据类型的响应式数据，或作为复杂对象属性的响应式代理	创建整个复杂对象的响应式数据