Vue3 reactive函数

1、作用

定义一个对象的响应式数据(基本类型不用它，用ref)

2、使用

a、引入

import { reactive } from 'vue';

b、语法

const 代理对象= recative(源对象)

源对象可以是数组或对象，返回Proxy对象的实例对象

3、reactive定义的响应式是深层次的

4、案例

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工作：{{person.job.wMode}}</h2>
  <h2>薪水：{{person.job.salary}}</h2>
  <h2>爱好:{{ person.hobby[0] }}</h2>
  <button @click="changeInfo">点击</button>
</template>

<script>
  import { ref } from 'vue';
  import { reactive } from 'vue';

  export default {
    name: 'App',
    components: {},
    setup() {
      const person = reactive({
        name: 'jojo',
        age: 8,
        job:{
          wMode:996,
          salary:2800
        },
        hobby:['抽烟', '喝酒', '烫头']
      })
      function changeInfo(){
        person.name = 'duke'
        person.age = 4
        person.job.wMode = '855'
        person.job.salary = 3500
        person.hobby[0] = '开车'
      }
      return {
        person,
        changeInfo,
      }
    }
  }
</script>

<style>

</style>

5、比较

比ref好用