reactive介绍

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

const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

响应式转换是“深层的”：会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy
实现，通过代理对象操作源对象内部数据都是响应式的

<template>
  <h2>组合式API reactive的使用</h2>
  <h4>姓名：{{user.name}}</h4>
  <h4>年龄：{{user.age}}</h4>
    <h4>媳妇：{{user.wife}}</h4>

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

<script lang="ts">
import {defineComponent, reactive,ref} from 'vue'
export default defineComponent({
  name:'reactive',
  //需求，显示用户的相关信息，点击按钮，可以更新用户的相关信息数据
  setup(){

    const obj={
      name:'汪汪汪',
      age:23,
      wife:{
        name:'咚咚咚',
        age:24,
        cars:['小电驴1','小电驴2','小电驴3']
      }
    }

    //把数据变成响应式数据
    //返回的是一个Proxy的代理对象，被代理的目标对象就是obj对象
    //user现在是代理对象，obj是目标对象
    //user的对象类型是Proxy对象
  //user对象是代理对象， obj对象是目标对象
  //修改是 需要使用user.属性进行修改  修改obj的话页面不更新，但是数据已经被修改
    const user = reactive(obj)
//****主要使用ref代理的时候 需要使用user.value.name获取name属性,使用reactive代理时使用user.name获取name属性
    function upDate(){
      user.name += '++'
      user.age +=2
      user.wife.cars[0] ='特斯拉'
    }

    return{
      user,
      upDate
    }
  }
})
</script>

<style>

</style>