VIP30/v3_project/3_reactive/App.vue

<template>
  <h2>reactive的使用</h2>
  <h3>名字： {{user.name }}</h3>
  <h3>年龄：{{ user.age }}</h3>
  <h3>朋友: {{ user.firend }}</h3>

  <h3>性别: {{ user.sex }}</h3>
  <hr>
  <button @click="update">更新数据</button>
</template>

<script lang="ts">
import { defineComponent,reactive } from 'vue'

export default defineComponent({
  //定义多个数据的响应式
  //语法： const proxy = reactive(obj)
  //接收一个普通对象然后返回该普通对象的响应式代理器对象
  setup () {
    //需求： 显示用户相关信息，点击按钮，可以更新用户的相关信息
    //把数据变为响应式的
    const obj = ({
      name: '小明',
      age: 20,
      firend: {
        name: '小红',
        age: 18,
        cars: [1,2,3]
      }
    })
    
    //接收一个普通对象 然后返回该普通对象的响应式代理对象
    const user = reactive<any>(obj)
    //返回的是一个proxy代理对象 被代理这就是reactive传入的对象
    console.log(user)

    const update= ()=>{
      //user： 代理对象  obj： 目标对象
      // obj.name = '小兰'
      user.name = '小兰'
      user.age += 2
      user.firend.name += '+++'
      //user对象或者obj对象添加一个新的属性 哪种方式影响页面更新


      // obj.sex = '男'

      user.sex = '男'
      //这种方式可以使页面更新渲染，最终也会添加到目标对象里面

      //通过当前的代理对象找到该对象中的某个属性，更改属性中的某个数组的值
      user.firend.cars[1] = 'bmw'
      //通过当前的代理对象把目标对象中的某个数组属性添加一个新的属性
      user.firend.cars[3] = ''
    }
    return {
      // obj,
      user,
      update
    }
  }
})
</script>

<style scoped>

</style>