Vue3中的reative函数：let 变量名 = reative(对象类型) 及 ref() 与reative()的对比

本文的内容一共有两个：

•   Vue3中的reative函数的使用

•   Vue3中ref() 和 reative()的对比

一、Vue3中的reative函数

<template>
  <h1>我是App组件</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工作种类：{{person.job.type}}</h2>
  <h2>工作薪水：{{person.job.salary}}</h2>
  <h2>爱好：{{person.hobby}}</h2>
  <h2>测试的数据：{{person.job.a.b.c}}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>

import { reactive } from 'vue'

export default {
  name: 'App',
  setup() {
    /**
     * reactive函数
     *  作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
     * 
     *  语法：const 代理对象 = reactive(源对象) 接收一个对象（或数组），返回一个代理对象
     *       （proxy的实例对象，简称proxy对象）
     * 
     *  reactive定义的响应式数据是“深层次的”
     * 
     *  内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作
     */
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        type: '前端',
        salary: '30k',
        a: {
          b: {
            c: 666
          }
        }
      },
      hobby: [
        '抽烟', '喝酒', '烫头'
      ]
    })
    function changeInfo() {
        person.name = '李四'
        person.age = 48
        person.job.type = '前端开发大牛'
        person.job.salary = '60k'
        person.job.a.b.c = 8888
        person.hobby[0] = '学习'
    }
    // 返回一个对象（常用）
    return {
      person,
      changeInfo
    }
  },
}
</script>

二、ref() 和 reative() 的对比：

        1. 从定义数据角度对比：

                ref：用来定义，基本类型数据。

                reactive：用来定义，对象（或数组）类型数据。

        注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

        2. 从原理角度对比：

                ref：通过Object.defineProperty()的get与set来实现响应式（数据劫持）。

                reactive：通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部

                                 的数据。

         3. 从使用角度对比：

                ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。

                                        （直接将基本类型数据放到一个对象中，即可使用reactive）

                reactive定义的数据：操作数据与读取数据均不需要.valule。