Vue3常用API之reactive

reactive函数

1. 作用：用于定义一个对象类型的响应式数据（只能定义对象类型，基本类型使用ref函数定义）
2. 虽然reactive无法定义基本类型的数据，但在实际开发中，通常将基本类型的数据封装在对象之中，使用reactive将对象变为代理对象
3. 语法：

   // 语法
   const 代理对象 = reactive(源对象)
   
   import { reactive } from 'vue'
   export default {
       name: 'App',
       setup () {
           // 接收对象
           const person = reactive({
               // 将基本类型的数据封装在对象之中
               name: '张三',
               age: 18,
               info: {
                   job: '前端开发工程师',
                   money: '10k',
                   position: {
                       longitude: 113.5353,
                       latitude: 23.3452
                   }
               }
           })
           // 接收数组
       	const arr = reactive(['333', '444', '555', '666'])
           
           return {
               person,
               arr
           }
       }
       
       // 使用数据：对象.属性名，如下：
       // person.name
       
       // 使用数据如下：
       // arr[0]
   }
   

4. 使用数据的方式：对象.属性名，不需要加.value
5. reactive()可以接收对象或数组，返回一个代理对象（Proxy的实例对象，简称Proxy对象），定义的响应式数据是深层次的
6. 内部基于es6的Proxy实现，通过代理对象操作源对象的内部数据进行操作