Vue 3中ref和reactive的区别

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

摘要：

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

引言：

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

正文：

1️⃣ ref

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

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

1. 创建一个 ref：

const count = ref(0);

2. 通过 ref 访问 DOM 元素：

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

3. 在模板中使用 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>

4. 在生命周期钩子中使用 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 代码案例：

1. 创建一个 reactive 对象：

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

2. 修改 reactive 对象：

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

3. 在模板中使用 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>

4. 在生命周期钩子中使用 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是Vue 3中实现响应式数据的两种方法，各有优缺点。了解它们的区别，有助于我们在实际项目中根据需求选择合适的方法。

参考资料：

• Vue Team. The Introduction to Vue 3[EB/OL]. https://v3.vuejs.org/guide/reactivity.html#ref-and-reactive.