Vue3新特性揭秘：Ref与Reactive的深度解析_Vue


Vue.js 3 引入了 ref 和 reactive 两个新的方法来创建响应式数据。与 Vue.js 2 中的 data 选项不同，这两个方法提供了更强大、更方便的方式来管理组件中的数据。

  1. ref

ref 方法用于创建一个响应式的数据引用。当一个对象被 ref 包装后，它的属性会被转换为响应式数据，并且在组件重新渲染时会自动更新。

使用 ref 的语法如下：

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式的数字

在模板中使用 ref 时，需要通过 .value 属性来访问其值：

<template>
  <div>{{ count.value }}</div>
</template>

需要注意的是，如果将 ref 对象的属性赋值为一个新的非响应式值，那么这个属性就不再是响应式的了。例如：

count.value = 1; // count 仍然是一个响应式对象，但是 count.value 变成了非响应式值
  1. reactive

reactive 方法用于创建一个响应式的对象。与 ref 不同的是，reactive 可以直接将一个普通的 JavaScript 对象转换为响应式数据，而不需要手动添加 .value 属性。此外，reactive 还提供了一个额外的选项 as，可以将一个对象的属性名映射到另一个名称上，方便在模板中使用。

使用 reactive 的语法如下：

import { reactive } from 'vue';

const state = reactive({ count: 0, message: 'Hello' }); // 创建一个响应式的对象

在模板中使用 reactive 时，可以直接访问其属性：

<template>
  <div>{{ state.count }}</div>
  <p>{{ state.message }}</p>
</template>

需要注意的是，如果直接修改 reactive 对象的属性值，那么这个属性仍然是响应式的。但是，如果修改的是对象的某个属性的值，那么只有这个属性会变成响应式，其他属性则不会受到影响。例如：

state.count++; // state.count 仍然是响应式的，但是 state.message 不是响应式的了