詳解Vue3中shallowRef和shallowReactive的使用

Posted on by

嗯，怎麼說呢，其實這兩個函數並不是很常用，在開發過程中基本上用不到，但是呢，我不寫我又感覺少點啥，所以說就簡單的說一下吧，其實不看也可以哈。

shallowRef 和 shallowReactive

  • shallowRef 函數，隻處理基本類型數據。
  • shallowReactive 函數，隻處理第一層數據。
  • 兩個在使用的時候都需要引入才可以。

上面說瞭是不是還是沒看懂？沒關系哈，先記住上面三條，然後詳細的說一下。

我們在之前的博客講過 ref 函數和 reactive 函數，他們的作用是將數據轉換成響應式的數據，在修改數據的時候，可以將數據實時展示在頁面上，基本數據也好，對象也好，都是這樣。

但是有一個問題呀，我們在把數據改為響應式數據的時候，不管是用 ref 函數還是使用 reactive 函數，他倆都是深度監聽，啥意思呢？就是 reactive 包裹的對象，就算有100層，也就是連續點一百個屬性那種，去修改最深層的數據，也是可以監聽到的，這樣的話就會存在問題瞭。

深度監聽的問題：

  • 無論 ref 函數還是 reactive 函數都是深度監聽。
  • 如果數據量過大，超級超級消耗性能。
  • 如果我們不需要對數據進行深度監聽的時候，就可以使用 shallowRef 函數和 shallowReactive 函數。

明白瞭嗎？不明白沒關系，我們通過幾個案例就知道瞭。

使用 shallowReactive 非深度監聽

記住一點，shallowReactive 函數，隻能處理第一層數據。

假設我們頁面有一個個人信息展示，有名字、有年齡需要展示，我們數據是存在 boy 對象裡面，然後 age 是在 boy 對象的 news 屬性下面，也就是深層，但是 name 是在 boy 對象下面，也就是第一層，我們有兩個按鈕，分別修改 name 和 age，看一下會有什麼效果。

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>年齡：{{news.age}}</h1>
    <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>

我們分別點擊兩個按鈕，看一下頁面變化。

通過效果，我們稍微總結一下：

  • shallowReactive隻會包裝第一層的數據
  • 默認情況它隻能夠監聽數據的第一層。
  • 如果想更改多層的數據，必須先更改第一層的數據，然後在去更改其他層的數據。這樣視圖上的數據才會發生變化。

使用 shallowRef 非深度監聽

開頭已經說過瞭，shallowRef 函數，隻能處理基本類型數據，為啥呢，因為 shallowRef 函數監聽的是.value 變化。並不是第一層的數據的變化。所以如果要更改 shallowRef 創建的數據，應該 xxx.value = XXX。

看代碼：

<template>
  <div>
    <h1>姓名：{{boy}}</h1>
    <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>

點擊按鈕，修改 boy 的值。

通過上面的截圖可以看見，數據是可以正常修改的。

然後遺留瞭一個問題：shallowRef 函數，隻處理基本類型數據 嗎？

看下面的案例：

<template>
  <div>
    <h1>姓名：{{boy.name}}</h1>
    <h1>年齡：{{boy.news.age}}</h1>
    <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>

在這個代碼裡面，我們用 shallowRef 包裹瞭一個對象， 然後在頁面顯示 name 和 age ，然後我們通過按鈕修改 name 和 age，看一下頁面的效果。

所以說呢，shallowRef 函數，隻能處理基本類型數據。

好瞭，今天的內容大體就這麼多，其實這兩個函數不怎麼用，知道就好，萬一用到也好明白怎麼用。

到此這篇關於詳解Vue3中shallowRef和shallowReactive的使用的文章就介紹到這瞭,更多相關Vue3 shallowRef shallowReactive內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：