reactive() 函数

reactive()函数只对对象类型有效（对象、数组、Map、Set），对string、number和 boolean这样的原始类型无效
reactive接收一个普通对象然后返回该普通对象的响应式代理
● 普通对象==>返回一个proxy对象，响应式转换是深层的，对影响对象内部所有嵌套的属性
● 用user.name=“new name”来修改值
● 内部基于proxy实现
● 获取数据值的时候直接获取，不需要加.value
● 参数只能传入对象类型

代码演示：

<script setup>

    // 引入 reactive 函数
    import { reactive } from 'vue'

    // reactive 对原始类型是无效（不具备响应式）
    let account = reactive('Abc')

    function changeAccount() {
        account += '='
        console.log(account)
    }

    // reactive 对象数据源（具有响应式）
    let emp = reactive({
        name: 'Jack',
        salary: 7000
    })

    function changeEmpSalary() {
        emp.salary += 1
        console.log(emp)
    }

</script>

<template>

    <hr>
    <h1>账号：{{ account }}</h1>
    <button @click="changeAccount">点我更改账号</button>

    <hr>
    <h1>员工：{{ emp }}</h1>
    <button @click="changeEmpSalary">点我更改员工薪资</button>

</template>