這篇文章主要介紹了Vue3中的shallowRef和shallowReactive怎么使用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue3中的shallowRef和shallowReactive怎么使用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供白沙黎族網(wǎng)站建設(shè)、白沙黎族做網(wǎng)站、白沙黎族網(wǎng)站設(shè)計(jì)、白沙黎族網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、白沙黎族企業(yè)網(wǎng)站模板建站服務(wù)，10多年白沙黎族做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

shallowRef 和 shallowReactive

• shallowRef 函數(shù)，只處理基本類型數(shù)據(jù)。

• shallowReactive 函數(shù)，只處理第一層數(shù)據(jù)。

• 兩個(gè)在使用的時(shí)候都需要引入才可以。

上面說(shuō)了是不是還是沒(méi)看懂？沒(méi)關(guān)系哈，先記住上面三條，然后詳細(xì)的說(shuō)一下。

我們?cè)谥暗牟┛椭v過(guò) ref 函數(shù)和 reactive 函數(shù)，他們的作用是將數(shù)據(jù)轉(zhuǎn)換成響應(yīng)式的數(shù)據(jù)，在修改數(shù)據(jù)的時(shí)候，可以將數(shù)據(jù)實(shí)時(shí)展示在頁(yè)面上，基本數(shù)據(jù)也好，對(duì)象也好，都是這樣。

但是有一個(gè)問(wèn)題呀，我們?cè)诎褦?shù)據(jù)改為響應(yīng)式數(shù)據(jù)的時(shí)候，不管是用 ref 函數(shù)還是使用 reactive 函數(shù)，他倆都是深度監(jiān)聽(tīng)，啥意思呢？就是 reactive 包裹的對(duì)象，就算有100層，也就是連續(xù)點(diǎn)一百個(gè)屬性那種，去修改最深層的數(shù)據(jù)，也是可以監(jiān)聽(tīng)到的，這樣的話就會(huì)存在問(wèn)題了。

深度監(jiān)聽(tīng)的問(wèn)題：

• 無(wú)論 ref 函數(shù)還是 reactive 函數(shù)都是深度監(jiān)聽(tīng)。

• 如果數(shù)據(jù)量過(guò)大，超級(jí)超級(jí)消耗性能。

• 如果我們不需要對(duì)數(shù)據(jù)進(jìn)行深度監(jiān)聽(tīng)的時(shí)候，就可以使用 shallowRef 函數(shù)和 shallowReactive 函數(shù)。

明白了嗎？不明白沒(méi)關(guān)系，我們通過(guò)幾個(gè)案例就知道了。

使用 shallowReactive 非深度監(jiān)聽(tīng)

記住一點(diǎn)，shallowReactive 函數(shù)，只能處理第一層數(shù)據(jù)。

假設(shè)我們頁(yè)面有一個(gè)個(gè)人信息展示，有名字、有年齡需要展示，我們數(shù)據(jù)是存在 boy 對(duì)象里面，然后 age 是在 boy 對(duì)象的 news 屬性下面，也就是深層，但是 name 是在 boy 對(duì)象下面，也就是第一層，我們有兩個(gè)按鈕，分別修改 name 和 age，看一下會(huì)有什么效果。

<template>
  <div>
    <h3>姓名：{{name}}</h3>
    <h3>年齡：{{news.age}}</h3>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowReactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowReactive({
      name: "我是????????.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.name = "????????.";
    };

    const btn2 = () => {
      boy.news.age++;
    };

    return { ...toRefs(boy), btn, btn2 };
  }
};
</script>

我們分別點(diǎn)擊兩個(gè)按鈕，看一下頁(yè)面變化。

通過(guò)效果，我們稍微總結(jié)一下：

• shallowReactive只會(huì)包裝第一層的數(shù)據(jù)

• 默認(rèn)情況它只能夠監(jiān)聽(tīng)數(shù)據(jù)的第一層。

• 如果想更改多層的數(shù)據(jù)，必須先更改第一層的數(shù)據(jù)，然后在去更改其他層的數(shù)據(jù)。這樣視圖上的數(shù)據(jù)才會(huì)發(fā)生變化。

使用 shallowRef 非深度監(jiān)聽(tīng)

開(kāi)頭已經(jīng)說(shuō)過(guò)了，shallowRef 函數(shù)，只能處理基本類型數(shù)據(jù)，為啥呢，因?yàn)?shallowRef 函數(shù)監(jiān)聽(tīng)的是.value 變化。并不是第一層的數(shù)據(jù)的變化。所以如果要更改 shallowRef 創(chuàng)建的數(shù)據(jù)，應(yīng)該 xxx.value = XXX。

看代碼：

<template>
  <div>
    <h3>姓名：{{boy}}</h3>
    <button @click="btn">修改boy</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef("我是????????.");

    const btn = () => {
      boy.value = "????????.";
    };

    return { boy, btn };
  }
};
</script>

點(diǎn)擊按鈕，修改 boy 的值。

通過(guò)上面的截圖可以看見(jiàn)，數(shù)據(jù)是可以正常修改的。

然后遺留了一個(gè)問(wèn)題：shallowRef 函數(shù)，只處理基本類型數(shù)據(jù) 嗎？

看下面的案例：

<template>
  <div>
    <h3>姓名：{{boy.name}}</h3>
    <h3>年齡：{{boy.news.age}}</h3>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef({
      name: "我是????????.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.value.name = "????????.";
    };

    const btn2 = () => {
      boy.value.news.age++;
    };

    return { boy, btn, btn2 };
  }
};
</script>

在這個(gè)代碼里面，我們用 shallowRef 包裹了一個(gè)對(duì)象， 然后在頁(yè)面顯示 name 和 age ，然后我們通過(guò)按鈕修改 name 和 age，看一下頁(yè)面的效果。

所以說(shuō)呢，shallowRef 函數(shù)，只能處理基本類型數(shù)據(jù)。

關(guān)于“Vue3中的shallowRef和shallowReactive怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue3中的shallowRef和shallowReactive怎么使用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：Vue3中的shallowRef和shallowReactive怎么使用
文章地址：http://chinadenli.net/article28/gehocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、App開(kāi)發(fā)、網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)