快捷導(dǎo)航

Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例詳解

更新時(shí)間：2023年11月08日 16:06:40 作者：小吳吳吳呀

這篇文章主要介紹了Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的實(shí)例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

shallowReactive：只處理對象第一層數(shù)據(jù)的響應(yīng)式（淺響應(yīng)式）。

shallowRef：只處理基本數(shù)據(jù)類型的響應(yīng)式，不處理對象類型的響應(yīng)式。

shallowReactive 適用于：如果有一個(gè)對象類型的數(shù)據(jù)，結(jié)構(gòu)比較深，但變化時(shí)只是外層屬性會變化。

shallowRef 適用于：如果有一個(gè)對象類型的數(shù)據(jù)，后續(xù)功能不會修改該對象中的屬性，而是生成新的對象來替換。

只考慮第一層數(shù)據(jù)的響應(yīng)式 shallowReactive 函數(shù)：

<template>
    <h2>姓名：{{ info.name }}</h2>
    <h2>年齡：{{ info.age }}</h2>
    <h2>薪資：{{ info.job.money }}</h2>
    <button @click="info.name += '風(fēng)'">修改姓名</button>
    <button @click="info.age++">修改年齡</button>
    <button @click="info.job.money++">增加薪資</button>
</template>
<script>
// 引入 shallowReactive 函數(shù)
import { shallowReactive } from 'vue'
export default {
    name: "Home",
    setup() {
        // 只考慮第一層數(shù)據(jù)的響應(yīng)式
        let info = shallowReactive({
            name: "張三",
            age: 18,
            job: {
                money: 20
            }
        })
        // 返回?cái)?shù)據(jù)
        return { info }
    }
}
</script>

注：使用 shallowReactive 創(chuàng)建的數(shù)據(jù)，只有第一層是響應(yīng)式的，深層數(shù)據(jù)修改后，頁面不會實(shí)時(shí)更新。

只考慮基本數(shù)據(jù)類型的響應(yīng)式 shallowRef 函數(shù) ：

<template>
    <h2>數(shù)字：{{ sum }}</h2>
    <button @click="sum++">數(shù)據(jù)+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 函數(shù)
import { shallowRef } from 'vue'
export default {
    name: "Home",
    setup() {
        // 只處理基本數(shù)據(jù)類型的響應(yīng)式
        let sum = shallowRef(10);
        // 直接替換這個(gè)對象時(shí)，頁面也會更新
        let info = shallowRef({
            name: "張三"
        })
        // 不處理對象類型的響應(yīng)式
        let user = shallowRef({
            age: 18
        })
        // 返回?cái)?shù)據(jù)
        return { sum, info, user }
    }
}
</script>

注：使用 shallowRef 創(chuàng)建基礎(chǔ)數(shù)據(jù)類型是響應(yīng)式的，創(chuàng)建對象數(shù)據(jù)類型就不是響應(yīng)式的了。但可以直接替換這個(gè)對象，頁面也會實(shí)時(shí)更新。