vue3入门教程：reactive函数

根本用法

• 引入 reactive
  起首，你须要从 vue 包中引入 reactive 函数：
  1. import { reactive } from 'vue';

  复制代码
• 创建一个相应式对象
  使用 reactive 函数来创建一个相应式对象：
  1. const state = reactive({
  2.   count: 0,
  3.   name: 'Vue 3'
  4. });

  复制代码
  在这个例子中，state 是一个相应式对象，它包罗了 count 和 name 这两个属性。
  
• 在模板中使用
  在 Vue 组件的模板中，你可以直接访问相应式对象的属性：
  1. <template>
  2.   <div>
  3.     <p>Count: {{ state.count }}</p>
  4.     <p>Name: {{ state.name }}</p>
  5.   </div>
  6. </template>

  复制代码
  当这些属性发生变革时，模板将自动更新。
  

深层相应性

reactive() 提供的相应性是深层的，这意味着它可以处理处罚嵌套的对象布局。比方：

1. const nestedState = reactive({
2.   user: {
3.     name: 'John',
4.     age: 30
5.   },
6.   posts: [
7.     { title: 'Post 1', content: '...' },
8.     { title: 'Post 2', content: '...' }
9.   ]
10. });

复制代码

在这个例子中，nestedState 是一个相应式对象，它包罗一个名为 user 的相应式对象和一个名为 posts 的相应式数组。你可以像访问平凡对象属性一样访问这些嵌套的相应式数据。
在组合式 API 中使用

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

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

复制代码

在模板中，你可以直接访问 state 对象及其属性。
留意事项和范围性

• 仅支持对象范例：reactive() 仅对对象范例有效（如对象、数组、Map、Set 等聚集范例），对原始范例（如 String、Number、Boolean）无效。
  
• 解构赋值会丢失相应性：假如你对相应式对象举行解构赋值，解构出来的属性将失去其相应性。假如须要保持相应性，可以使用 toRefs 或 toRef 函数。
  
• 制止直接更换相应式对象：假如你直接更换一个相应式对象（比方 state = reactive({...})），将会导致对初始引用的相应性毗连丢失。
  

示例代码

以下是一个完备的示例，展示了怎样在 Vue 组件中使用 reactive()：

1. <template>  <div>    <p>Count: {{ state.count }}</p>    <p>Name: {{ state.name }}</p>    <button @click="increment">Increment</button>  </div></template><script>import { reactive } from 'vue';
2. 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()，你可以更轻松地管理组件的状态，并实现数据的双向绑定和自动更新。