reactive创建对象类型的响应式数据

在 Vue 3 的 Composition API 中，reactive() 函数用于创建对象类型**（对象、数组、Map、Set 等）的响应式数据。**

和ref一样，在使用reactive之前，我们需要进行引入

js 复制代码

import { reactive } from 'vue'

之后，也和ref的用法差不多，用reactive创建响应式数据

js 复制代码

  const user = reactive({
        name: '张三',
        age: 25,
        address: {
            city: '北京',
            street: '朝阳区'
        }
    })

js 复制代码

<template>
    <div class="person">
        <h2>{{ user.name }}</h2>
        <p>年龄: {{ user.age }}</p>
        <p>城市: {{ user.address.city }}</p>
    </div>
</template>

让我们添加两个按钮，来修改验证数据是不是响应式的

js 复制代码

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <p>年龄: {{ user.age }}</p>
    <p>城市: {{ user.address.city }}</p>
    
    <button @click="incrementAge">增加年龄</button>
    <button @click="updateCity">更新城市</button>

  </div>
</template>

js 复制代码

<script lang="ts" setup>
    import { reactive } from 'vue'
    const user = reactive({
        name: '张三',
        age: 25,
        address: {
            city: '北京',
            street: '朝阳区'
        }
    })
    const incrementAge = () => {
    user.age++
    }

    const updateCity = () => {
    user.address.city = '上海'}


 </script>

那我们如何读取修改或者添加到reactive中的响应式数据呢？

js 复制代码

  const todos = reactive([
        { id: 1, text: '学习 Vue 3' },
        { id: 2, text: '掌握响应式' }
    ])

js 复制代码

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <p>年龄: {{ user.age }}</p>
    <p>城市: {{ user.address.city }}</p>
    
    <button @click="incrementAge">增加年龄</button>
    <button @click="updateCity">更新城市</button>
    
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

vue 复制代码

<script lang="ts" setup>
    import { reactive } from 'vue'
    const user = reactive({
        name: '张三',
        age: 25,
        address: {
            city: '北京',
            street: '朝阳区'
        }
    })
    const todos = reactive([
        { id: 1, text: '学习 Vue 3' },
        { id: 2, text: '掌握响应式' }
    ])
    const incrementAge = () => {
    user.age++
    }

    const updateCity = () => {
    user.address.city = '上海'}
     // 添加新任务
    todos.push({
        id: todos.length + 1,
        text: `访问${user.address.city}`
    })

</script>

学习过vue2的同学对于v-for肯定不陌生的，它就是一个循环，只是它比JavaScript中的for...of和for...in更加智能，它可以根据类型自动选择最佳的便利策略，其中:key="todo.id用于给每个渲染的元素提供一个唯一的标识符。是v-bind:key的简写

对于多层的嵌套对象也是响应式的；

js 复制代码

<h2>{{ test.x.y.c }}</h2>
<script lang="ts" setup>
    import { reactive } from 'vue'
    const user = reactive({
        name: '张三',
        age: 25,
        address: {
            city: '北京',
            street: '朝阳区'
        }
    })
    const todos = reactive([
        { id: 1, text: '学习 Vue 3' },
        { id: 2, text: '掌握响应式' }
    ])
     const test = reactive({x:{y:{c:666}}})