ref() 函数

使用ref()方法我们可以创建任何类型的响应式数据，获取时需要通过.value来进行获取
当值为对象类型时，会用reactive()自动转换它的 .value
ref 接受一个内部值并返回一个响应式可变的ref对象
任意类型==>返回一个ref对象
用num.value=***来修改值
获取数据值的时候需要加.value。可以理解为ref是通过reactive包装了一层具有value属性的对象实现的
参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广，setup中定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦
template中使用ref值不用通过value获取（导出后已默认做了一个解构），js中使用ref必须通过.value获取
ref获取元素

代码演示：

<script setup>

    // 引入 ref 函数，来声明响应式对象
    import { ref } from 'vue'
    
    // 使用 ref 函数来声明原始类型的数据源，具备响应式
    let account = ref('Abc')

    // 更改账号，控制台查看最新值
    function changeAccount() {
        // 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值
        account.value += '='
        console.log(account)
    }

    // 使用 ref 函数来声明对象类型的数据源：具备响应式
    let emp = ref({
        salary: 7000,
        name: 'Jack'
    })
    
    // 更改员工薪资，控制台查看最新值
    function changeEmpSalary() {
        // 通过 ref 函数声明的响应式数据，需要使用 .value 来获取数据的值
        emp.value.salary += 100
        console.log(emp)
    }
</script>

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

    <hr>

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

</template>