vue3中reactive的基本使用

一、reactive

作用：定义多个数据的响应式

语法：const proxy = reactive(obj);

注意：内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的

二、需求:显示用户的相关信息，点击按钮，可以更新用户的相关信息数据

三、完整代码：

<template>

  <h2>reactive的使用</h2>

  <h3>名字:{{ user.name }}</h3>

  <h3>年龄:{{ user.age }}</h3>

  <h3>媳妇:{{ user.wife }}</h3>

  <button @click="updateUser">更新数据</button>

</template>

<script lang="ts">

import { defineComponent, reactive} from 'vue';

export default defineComponent({

  name: 'App',

  setup(){

    const obj = {

        name:'小明',

        age:20,

        wife:{

          name:'小甜甜',

          age:18,

          cars:['奔驰','宝马','奥迪']

        }

    }

    //把数据变成响应式的数据

    //返回的是一个Proxy的代理对象，被代理的目标对象就是obj对象

    //user现在是代理对象，obj是目标对象

    //user对象的类型是Proxy

    const user = reactive(obj)

    const updateUser = ()=>{

        // obj.name += '=='   直接使用目标对象的方式来更新目标对象中的成员的值是不可能的，只能使用代理对象的方式来更新数据（响应式数据）

        user.name += '=='

        user.age += 2

        user.wife.name += '++'

        user.wife.cars[0] ='莎士比亚'

    }

    //返回的是一个对象

    return {

      user,

      updateUser

    }

  }

})

</script>