Vue3 - reactive的基本使用

reactive： 可获取多个数据
把数据变为响应式数据，返回的是代理对象。
const xx = reactive(yy) xx是代理对象，yy是目标对象

<template>
  <div id="nav">
      <h2>{{xm.name}}</h2>
      <h2>{{xm.age}}</h2>
      <h2>{{xm.sex}}</h2>
      <h2>{{xm.wife}}</h2>
      <button @click="updateData">更新数据</button>
  </div>

</template>
<!--需求：显示用户相关信息，点击按钮，可以更新用户的相关信息数据-->
<script>
  import {defineComponent,reactive} from "vue"
  export default defineComponent ({
    name: 'App',
    // vue3组合API
    setup() { // 组合API入口函数
       const person = {
           name: '小明',
           age: 19,
           sex: '男',
           wife: {
               name: '小红',
               age: 18,
               sex: '女'
           }
       }
       // 把数据变成响应式的数据，返回的是一个Proxy的代理对象，被代理的目标对象就是person对象
        //xm现在是代理对象，person是目标对象
       const xm = reactive(person);
       // 更新数据
        const updateData = ()=> {
            xm.name += '=='
            xm.wife.name += '----'
        }
       return {
           xm,
           updateData
       }
    }
  })
</script>