vue3---reactive

• 作用: 定义一个对象类型的响应式数据（基本类型要用ref函数）,
• 【所以一般情况下，会用reactive将当前组件所需的属性都定义在一个对象中 】

• let data = reactive({
      person: {},
      student: {}
  })

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

 

<template>
  <h1>个人信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h3>岗位： {{ job.type }}</h3>
  <h3>薪资： {{ job.salary }}</h3>
  <h2>爱好：{{ hobby }}</h2>
  <h2>测试数据：{{ demoObj.a.b.c }}</h2>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    // 响应式数据需要借助ref
    // 通过ref定义的基本数据类型最后被封装成了一个实例对象RefImpl（defineProperty：getter、setter），所以修改的时候要修改属性的.value[在模版中不需要.vaule,框架帮助我们处理了])
    let name = ref('丫丫')
    let age = ref(24)
    // (通过ref定义的对象数据类型最后被封装成了一个代理m对象Proxy，
    let job = ref({
      type: '前端开发',
      salary: '3k'
    })
    // reactive只能接收非基本数据类型
    let hobby = reactive(['吃饭', '睡觉', '打豆豆'])
    let demoObj = reactive({
      number: 23,
      a: {
        b: {
          c: 666
        }
      }
    })

    function changeInfo () {
      name.value = '美少女'
      age.value = 18
      job.value.type = 'ui设计师'
      job.value.salary = '30k'
      hobby[1] = '旅游'
      demoObj.a.b.c = 999 //用reactive定义的对象在修改值时不需要.value
    }

    return {
      name,
      age,
      job,
      hobby,
      demoObj,
      changeInfo
    }
  }
}
</script>

reactive与ref对比：