Vue3中shallowRef和shallowReactive如何使用

本篇內(nèi)容介紹了“Vue3中shallowRef和shallowReactive如何使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

shallowRef 和 shallowReactive

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

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

• 兩個在使用的時候都需要引入才可以。

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

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

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

深度監(jiān)聽的問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看代碼：

<template>
  <div>
    <h2>姓名：{{boy}}</h2>
    <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 的值。

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

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

看下面的案例：

<template>
  <div>
    <h2>姓名：{{boy.name}}</h2>
    <h2>年齡：{{boy.news.age}}</h2>
    <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 函數(shù)，只能處理基本類型數(shù)據(jù)。

“Vue3中shallowRef和shallowReactive如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！