vue3入门教程：reactive函数

基本用法

1. 引入 reactive

   首先，你需要从 vue 包中引入 reactive 函数：

   import { reactive } from 'vue';
   

2. 创建一个响应式对象

   使用 reactive 函数来创建一个响应式对象：

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

   在这个例子中，state 是一个响应式对象，它包含了 count 和 name 这两个属性。

3. 在模板中使用

   在 Vue 组件的模板中，你可以直接访问响应式对象的属性：

   <template><div><p>Count: {{ state.count }}</p><p>Name: {{ state.name }}</p></div>
   </template>
   

   当这些属性发生变化时，模板将自动更新。

深层响应性

reactive() 提供的响应性是深层的，这意味着它可以处理嵌套的对象结构。例如：

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

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

在组合式 API 中使用

reactive() 通常与 Vue 的组合式 API 一起使用，特别是在 setup 函数中：

import { reactive } from 'vue';export default {setup() {const state = reactive({count: 0,name: 'Vue 3'});function increment() {state.count++;}return {state,increment};}
};

在模板中，你可以直接访问 state 对象及其属性。

注意事项和局限性

1. 仅支持对象类型：reactive() 仅对对象类型有效（如对象、数组、Map、Set 等集合类型），对原始类型（如 String、Number、Boolean）无效。

2. 解构赋值会丢失响应性：如果你对响应式对象进行解构赋值，解构出来的属性将失去其响应性。如果需要保持响应性，可以使用 toRefs 或 toRef 函数。

3. 避免直接替换响应式对象：如果你直接替换一个响应式对象（例如 state = reactive({...})），将会导致对初始引用的响应性连接丢失。

示例代码

以下是一个完整的示例，展示了如何在 Vue 组件中使用 reactive()：

<template><div><p>Count: {{ state.count }}</p><p>Name: {{ state.name }}</p><button @click="increment">Increment</button></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const state = reactive({count: 0,name: 'Vue 3'});function increment() {state.count++;}return {state,increment};}
};
</script>

在这个例子中，当点击按钮时，increment 函数会被调用，state.count 的值会增加，并且模板会自动更新以反映这个变化。

总结

reactive() 是 Vue 3 中用于创建响应式对象的强大工具。通过合理使用 reactive()，你可以更轻松地管理组件的状态，并实现数据的双向绑定和自动更新。