快捷導(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ì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

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

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

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

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

只考慮第一層數(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ù)修改后，頁面不會(huì)實(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è)對(duì)象時(shí)，頁面也會(huì)更新
        let info = shallowRef({
            name: "張三"
        })
        // 不處理對(duì)象類型的響應(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)建對(duì)象數(shù)據(jù)類型就不是響應(yīng)式的了。但可以直接替換這個(gè)對(duì)象，頁面也會(huì)實(shí)時(shí)更新。

到此這篇關(guān)于Vue創(chuàng)建淺層響應(yīng)式數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue響應(yīng)式數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: