vue 组合式API 中响应式变量和普通变量

如果在组合式 API 中直接声明普通变量的数据源，他们并不具备响应式数据

// 普通的变量不具备响应式

let account = 123

// 普通类型的对象，不具备响应式

let emp = {

        salary: 7000,

        name: 'Annie'

    }

1. 普通变量在改变元素值的时候，页面并不会同时改变

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

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

2.响应式变量 

2.1 reactive()函数只对对象类型有效（对象、数组、Map、Set），对string、number和 boolean这样的原始类型无效

// 响应式对象变量

let student = reactive({

    "name":"xiaoming",

    "age":16,

    "id":21

})

2.2  使用ref()方法我们可以创建任何类型的响应式数据，获取时需要通过.value来进行获取，当值为对象类型时，会用reactive()自动转换它的 .value

let title = ref("我的第一个组件")  // 响应式字符串变量

<script setup>

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

    // 使用 ref 函数来声明对象类型的数据源：具备响应式
    let emp = ref({
        salary: 7000,
        name: 'Jack'
    })
    
</script>

<template>

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

</template>

3. 响应式变量和非响应式变量在同一个方法中混合使用的时候，就会都变成了响应式变量

<script setup>
    import { reactive, ref } from 'vue';
    let title = ref("我的第一个组件")
    // 普通的变量不具备响应式
    let account = 123

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

    // 普通类型的对象，不具备响应式
    let emp = {
        salary: 7000,
        name: 'Annie'
    }
    let student = reactive({
        "name":"xiaoming",
        "age":16,
        "id":21
    })
    function changeEmpSalary() {
        emp.salary += 100
        console.log(emp)
    }
    // 运行这个方法的时候，不管响应式变量还是非响应式变量，都发生了改变，并且渲染到了页面
    function changeAll() {
        student.age=50
        student.name="小明"
        emp.name="安妮"
        account = 789
        emp.salary += 100
    }

</script>

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

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

    <hr>
    <h1>账号：{{ account  }}</h1>
    <h1>姓名：{{ emp.name }}</h1>
    <h1>薪资：{{ emp.salary  }}</h1>
<hr>
    <h1>标题：{{ title  }}</h1>
    <h1>学生姓名：{{ student.name }}</h1>
    <h1>学生年龄：{{ student.age  }}</h1>
    <button @click="changeAll">点我全部更改</button>

</template>