前言

前些天了解了ref，开发时候大部分时候都是直接用ref，其实还有reactive这玩意，有时候用起来更方便，不需要.value,本文介绍一下。在 Vue 3 中，reactive 是一个用于创建响应式对象的函数。通过 reactive，你可以将一个普通的 JavaScript 对象转换为响应式对象，使得其属性的变化能够触发视图更新。

reactive 的基本用法

1、创建响应式对象：

使用 reactive 函数来创建一个响应式对象。这个函数接受一个普通的 JavaScript 对象作为参数，并返回一个新的响应式代理对象。

import { reactive } from 'vue';  

const state = reactive({  
  count: 0,  
  name: 'Vue 3',  
  isActive: true  
});

在上面的例子中，state 是一个响应式对象，它包含了 count、name 和 isActive 这三个属性。

访问和修改响应式对象的属性：

你可以像访问普通对象一样访问响应式对象的属性。当你修改响应式对象的属性时，Vue 将自动跟踪这些变化，并在需要时更新相关的视图。

// 访问属性

console.log(state.count);      // 输出: 0  
console.log(state.name);       // 输出: 'Vue 3'  
console.log(state.isActive);   // 输出: true  

// 修改属性

state.count++;  
state.name = 'New Name';  
state.isActive = false;

2、在模板中使用响应式对象：

在 Vue 组件的模板中，你可以直接访问响应式对象的属性。当这些属性发生变化时，模板将自动更新。

<template>  
  <div>  
    <p>Count: {{ state.count }}</p>  
    <p>Name: {{ state.name }}</p>  
    <p>Is Active: {{ state.isActive }}</p>  
    <button @click="incrementCount">Increment</button>  
  </div>  
</template>  

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

export default {  
  setup() {  
    const state = reactive({  
      count: 0,  
      name: 'Vue 3',  
      isActive: true  
    });  

    function incrementCount() {  
      state.count++;  
    }  

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

在上面的例子中，模板中直接使用了 state.count、state.name 和 state.isActive。当点击按钮时，incrementCount 方法会被调用，从而修改 state.count 的值，并触发视图的更新。

3、响应式对象的嵌套：

reactive 可以处理嵌套的对象。这意味着你可以在响应式对象中包含其他响应式对象或数组。

const nestedState = reactive({  
  user: reactive({  
    name: 'John',  
    age: 30  
  }),  
  posts: reactive([  
    { title: 'Post 1', content: '...' },  
    { title: 'Post 2', content: '...' }  
  ])  
});

在这个例子中，nestedState 是一个响应式对象，它包含一个名为 user 的响应式对象和一个名为 posts 的响应式数组。你可以像访问普通对象属性一样访问这些嵌套的响应式数据。

总结

需要注意的是，虽然 reactive 可以处理嵌套的数据结构，但当你解构响应式对象时，解构出来的属性将失去其响应性。如果需要保持响应性，可以使用 toRefs 或 toRef 函数来解构响应式对象。

烟水三千归路长，明月依旧照酒巷