Vue3.0的遞迴監聽和非遞迴監聽

監聽的意思就是資料雙向繫結，檢視根據資料變化

遞迴監聽

預設情況下，無論是使用ref和reactive都是遞迴監聽,但是如果資料量非常大的話，就特別消耗效能

不信的話，我舉個例子

import {reactive } from "vue";

setup() {
    let state = reactive({
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    });
      console.log(state)
      console.log(state.gf)
      console.log(state.gf.f)
      console.log(state.gf.f.s)
   }

對吧，內部每個都做了遞迴，尤大佬給我們提供了一個方法，避免這樣

非遞迴監聽

shallowReactive:第一層資料如果不該變的話,檢視不會更新

程式碼

import { shallowReactive } from "vue"

setup() {
    let state = reactive({
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    });
      state.a = '1';
      state.gf.b = '2';
      state.gf.f.c = '3';
      state.gf.f.s.d = '4'

      console.log(state)
      console.log(state.gf)
      console.log(state.gf.f)
      console.log(state.gf.f.s)

    }

只有第一層發生了遞迴監聽，當我們第一層資料沒改變的時候，下面層的資料改變了是不會更新我們的UI檢視的

shallowRef:shallowRef建立的資料，vue監聽的是.value的變化,並不是第一層的變化

import { shallowRef} from "vue";

setup() {
    let state = shallowReactive({
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    });
   //必須這樣修改
  state.value = {
        a: "1",
        gf: {
          b: "2",
          f: {
            c: "3",
            s: {
              d: "4",
            },
          },
        },
      };
}

但是我們就想修改某一層的值怎麼辦？這樣即可

import { triggerRef} from "vue";

state.value.gf.f.s.d = '4';
triggerRef(state)

注意：vue3只提供了triggerRef，所以如果是reactive型別的資料,是無法主動觸發頁面更新的

再說明下ref和reactive

ref

1.ref也是響應式資料方法,ref可以實現對簡單值的監聽，字串，數字等

2.ref底層的本質其實還是reactive,系統會自動根據我們給ref傳入的值將
它轉換成ref(xx) ->reactive({value:xx})

3.在vue中使用ref的值不用通過value獲取,在js中使用ref的值必須通過value獲取

reactive

1.reactive是vue3中提供的實現響應式資料的方法

2.vue2響應式資料是通過defineProperty,vue3是通過es6的proxy實現

3.reactive引數必須是物件或者陣列

這倆區別

1.如果在template裡使用的是ref型別的資料,那麼Vue會自動幫我們新增.value

2.如果在template裡使用的是reactive型別的資料,那麼Vue不會自動幫我們新增.value

3.vue內部根據一個v_isRef屬性來判斷的,ref的v_isRef屬性為true,reactive就沒有這個屬性