1.Vue3 中 ref 和 reactive 都是深度監聽

預設情況下，
無論是通過 ref 還是 reactive 都是深度監聽。
深度監聽存在的問題：
如果資料量比較大，非常消耗效能。
有些時候我們並不需要對資料進行深度監聽。
這個時候就沒有必要使用ref和reactive

2.說明 ref 對資料進行深度監聽

<template>
 <div>
    <div>
      <li>{{state}}</li>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=ref({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
      state.value.b.c.d1.f1.f1="f1f1f1f1"
     }
     return {state,func1}
  },
}
</script>
 

通過上面的程式碼，我們發現無論寫多少層資料；
資料層級有多深，ref始終會對資料進行深度監聽。
這顯然不是我們需要的。
我們迫切需要對資料進行非深度監聽。
這個時候，我們的shallowReactive和shallowRef就出場了。

3.使用 shallowReactive 非深度監聽

前面我們說道：
預設情況下，無論是通過 ref 還是 reactive 都是深度監聽。
所以Vue3為我們提供了，shallowReactive進行非深度監聽。
shallowReactive只會包裝第一層的資料
預設情況它只能夠監聽資料的第一層。
如果想更改多層的資料，
你必須先更改第一層的資料。
然後在去更改其他層的資料。
這樣檢視上的資料才會發生變化。
 

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {shallowReactive} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=shallowReactive({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
       console.log( state );//只有第一層
       console.log( state.b.b1 )
       console.log(state.b.c )
       console.log( state.b.c.d1 )
       console.log( state.b.c.d1.f1 );
      //  直接更改其他層的資料，會失敗的哈
      // state.b.c.d1.f1.f1="f1f1f1f1"

      // 先更改第一層，然後在更改其他層就會成功
      state.a="啊啊啊"
      state.b.c.d1.f1.f1="f1f1f1f1"

     }
     return {state,func1}
  },
}
</script>
 

4.使用 shallowRef 進行非深度監聽

注意點：如果是通過shallowRef建立的資料。
那麼Vue監聽的是.value 變化。
並不是第一層的資料的變化。
因此如果要更改shallowRef建立的資料。
應該xxx.value={}

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {shallowRef} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=shallowRef({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
       //  通過 state.value的方式直接去更改
       state.value={
          a:'我是a',
          b:{
            b1:"我是b1",
            c:{
              c1:"我是c1",
              d1:{
                e1:"我是e1",
                f1:{
                  f1:"f1"
                }
              }
            }
          }
       }

     }
     return {state,func1}
  },
}
</script>

5.triggerRef更改shallowRef建立的資料

triggerRef 可以直接去更改
shallowRef建立資料的某一層。
需要我們注意的是：
vue3中值提供了triggerRef這個方法，
但是並沒有提供triggerReactive的方法。
也就是說triggerRef 【不可以】去更改
shallowReactive建立的資料

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按鈕</button>
    </div>
 </div>
</template>
<script>
import {shallowRef,triggerRef} from 'vue'
export default {
  name: 'App',
  setup(){
     let state=shallowRef({
       a:'a',
       b:{
         b1:"b1",
         c:{
           c1:"c1",
           d1:{
             e1:"e1",
             f1:{
               f1:"f1"
             }
           }
         }
       }
     })
     function func1(){
       //  直接更改你需要修改某一層的資料
       state.value.b.c.d1.f1="我是f1";
       triggerRef(state)
     }
     return {state,func1}
  },
}
</script>

通過上面的幾個例子
我們知道一般情況下。我們使用ref和reactive即可。
只有在監聽的資料量比較大的時候。
才使用shallowReactive和shallowRef。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！