Vue3 中的 reactive 函数

1.作用

        定义一个对象数据类型的响应式数据（基本数据类型不要它，要用 ref 函数）

2.语法

        const 代理对象 = reactive(源对象)， 源对象可以是对象和数组，reactive(源对象)返回一个代理对象（Proxy的实例对象，简称proxy对象）

代理对象（Proxy的实例对象，简称proxy对象）打印结果如下：

 3.注意

        1.reactive 定义的响应式数据是”深层次的“，不管对象或数组中嵌套多少层都可以监测的到

        2.reactive 函数 内部基于 ES6 的 Proxy 实现，通过代理对象对源对象内部进行操作

4.代码展示

<template>
  <!-- vue3 中组件中的模板结构可以没有根标签 -->
  <h1>我是{{ person.name }}</h1>
  <h1>今年{{ person.age }}</h1>
  <h1>工作是{{ person.job.type }}</h1>
  <h1>薪资是{{ person.job.salary }}</h1>
  <button @click="person.sayHello">点击欢迎</button>
  <hr>
  <button @click="person.change">点击更改信息</button>
</template>

<script>

  // 引入 渲染函数中的 h
  import {h} from 'vue'
  // 引入 ref 函数
  import {ref} from 'vue'
  // 引入 recative 函数
  import {reactive} from 'vue'
  export default {
    name: 'App',

    // vue3 配置
    setup() {

      // person 配置
      const person = reactive({ // 数据
        name: '张三',
        age: 18,
        job:{
          type: '前端工程师',
          salary: '30k'
        },

        // 方法
        sayHello() {
          alert('Hello Vue3')
        },

        change() {
          this.name = '李四',
          this.age = 99,
          this.job.type = 'UI工程师',
          this.job.salary = '60k'
          
        }
      })

      console.log(person)

      // 返回一个对象 (常用)
      return {
       person
      }

    }
  
  }
</script>

<style>

</style>