Vue创建浅层响应式数据的实例详解

<template>
    <h2>姓名：{{ info.name }}</h2>
    <h2>年龄：{{ info.age }}</h2>
    <h2>薪资：{{ info.job.money }}</h2>
    <button @click="info.name += '风'">修改姓名</button>
    <button @click="info.age++">修改年龄</button>
    <button @click="info.job.money++">增加薪资</button>
</template>
<script>
// 引入 shallowReactive 函数
import { shallowReactive } from 'vue'
export default {
    name: "Home",
    setup() {
        // 只考虑第一层数据的响应式
        let info = shallowReactive({
            name: "张三",
            age: 18,
            job: {
                money: 20
            }
        })
        // 返回数据
        return { info }
    }
}
</script>

<template>
    <h2>数字：{{ sum }}</h2>
    <button @click="sum++">数据+1</button>
    <hr />
    <h2>姓名：{{ info.name }}</h2>
    <button @click="info = { name: '李四' }">修改姓名</button>
    <hr />
    <h2>年龄：{{ user.age }}</h2>
    <button @click="user.age++">增加年龄</button>
</template>
<script>
// 引入 shallowRef 函数
import { shallowRef } from 'vue'
export default {
    name: "Home",
    setup() {
        // 只处理基本数据类型的响应式
        let sum = shallowRef(10);
        // 直接替换这个对象时，页面也会更新
        let info = shallowRef({
            name: "张三"
        })
        // 不处理对象类型的响应式
        let user = shallowRef({
            age: 18
        })
        // 返回数据
        return { sum, info, user }
    }
}
</script>