Vue3实战笔记（48）— reactive大揭秘：Vue 3中复杂数据结构的响应式处理

文章目录

前言
reactive 的基本用法
- 1、创建响应式对象：
- 2、在模板中使用响应式对象：
- 3、响应式对象的嵌套：
总结

前言

前些天了解了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: '...' }  ])  
});