欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue3中shallowRef和shallowReactive的使用

 更新時間:2022年07月09日 08:24:50   作者:ed。  
這篇文章主要為大家介紹了Vue3中shallowRef和shallowReactive函數(shù)的使用方法,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下

嗯,怎么說呢,其實(shí)這兩個函數(shù)并不是很常用,在開發(fā)過程中基本上用不到,但是呢,我不寫我又感覺少點(diǎn)啥,所以說就簡單的說一下吧,其實(shí)不看也可以哈。

shallowRef 和 shallowReactive

  • shallowRef 函數(shù),只處理基本類型數(shù)據(jù)。
  • shallowReactive 函數(shù),只處理第一層數(shù)據(jù)。
  • 兩個在使用的時候都需要引入才可以。

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

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

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

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

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

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

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

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

假設(shè)我們頁面有一個個人信息展示,有名字、有年齡需要展示,我們數(shù)據(jù)是存在 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>

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

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

  • shallowReactive只會包裝第一層的數(shù)據(jù)
  • 默認(rèn)情況它只能夠監(jiān)聽數(shù)據(jù)的第一層。
  • 如果想更改多層的數(shù)據(jù),必須先更改第一層的數(shù)據(jù),然后在去更改其他層的數(shù)據(jù)。這樣視圖上的數(shù)據(jù)才會發(fā)生變化。

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

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

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

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

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

看下面的案例:

<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 函數(shù),只能處理基本類型數(shù)據(jù)。

好了,今天的內(nèi)容大體就這么多,其實(shí)這兩個函數(shù)不怎么用,知道就好,萬一用到也好明白怎么用。

到此這篇關(guān)于詳解Vue3中shallowRef和shallowReactive的使用的文章就介紹到這了,更多相關(guān)Vue3 shallowRef shallowReactive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論