Vue3.0学习 - 第七节，ref和reactive 递归监听和非递归监听shallowRef、shallowReactive以及triggerRef

水深无声 2023-01-13 11:59 32阅读 0赞

## 1. 递归监听 ##

默认情况下，Vue3 中的 `ref` 和 `reactive` 都是递归监听的，即能实时监听对象的底层变化。

## 2. 递归监听存在的问题 ##

如果数据量比较大，非常消耗性能

**ref**和**reactive** 的递归监听 ：

<template>
      <div>
        <p>state.a == {
       { state.a }}</p>
        <p>state.gf.b == {
       { state.gf.b }}</p>
        <p>state.gf.f.c == {
       { state.gf.f.c }}</p>
        <p>state.gf.f.s.d == {
       { state.gf.f.s.d }}</p>
        <button @click="myFun">改变</button>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          color="#987cb9"
          SIZE="10"
        />
        <p>a:{
       { refState.a }}</p>
        <p>b:{
       { refState.gf.b }}</p>
        <p>c:{
       { refState.gf.f.c }}</p>
        <p>d:{
       { refState.gf.f.s.d }}</p>
        <button @click="myFun1">改变</button>
      </div>
    </template>
    
    <script>
    /*
    1. 递归监听
    默认情况下，无论是通过ref还是reactive都是递归监听
    
    2. 递归监听存在的问题
    如果数据量比较大，非常消耗性能
    
    */
    import { ref, reactive } from "vue";
    
    export default {
      name: "App",
      // setu函数是组合api的入口函数
      setup() {
        let state = reactive({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun() {
          state.a = 1;
          state.gf.b = 2;
          state.gf.f.c = 3;
          state.gf.f.s.d = 4;
          console.log('state.a',state)
          console.log('state.gf.b',state.gf)
          console.log('state.gf.f.c',state.gf.f)
          console.log('state.gf.f.s.d',state.gf.f.s)
    
          state.gf.b = 2;
          state.gf.f.c = 3;
          state.gf.f.s.d = 4;
    
        }
        let refState = ref({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun1() {
          refState.value.a = 1;
          refState.value.gf.b = 2;
          refState.value.gf.f.c = 3;
          refState.value.gf.f.s.d = 4;
    
          console.log('refState.a',refState.value)
          console.log('refState.gf.b',refState.value.gf)
          console.log('refState.gf.f.c',refState.value.gf.f)
          console.log('refState.gf.f.s.d',refState.value.gf.f.s)
        }
    
        return { myFun, state, refState,myFun1 };
      },
    
      methods: {
       
      },
    };
    </script>

在reactive中：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

点击 按钮 改变；

![20210418233956273.png][]

控制台打印：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

从控制台打印我们可以看出， reactive内部做了递归，每一层都包装成proxy

在ref中也一样；

总之，就是只要我们对 **`ref`** 和 **`reactive`** 中的内容进行更改，在默认情况下，只要更改的对象不是我们在  中提到的类似 `Date` 的类型，都是能察觉到并且进行双向数据绑定的。

在默认情况下，递归监听肯定是好的，它让数据的变化能被实时监测到。然而它也带来了性能消耗的问题。

## vue3提供了非递归监听shallow方法，防止进行递归监听 ##

## shallow ##

我们先回顾一下ref源码

function createRef(rawValue, shallow) {
      if (isRef(rawValue)) {
        return rawValue
      }
      let value = shallow ? rawValue : convert(rawValue)
      const r = {
        __v_isRef: true,
        get value() {
          track(r, TrackOpTypes.GET, 'value')
          return value
        },
        set value(newVal) {
          if (hasChanged(toRaw(newVal), rawValue)) {
            rawValue = newVal
            value = shallow ? newVal : convert(newVal)
            trigger(
              r,
              TriggerOpTypes.SET,
              'value',
              __DEV__ ? { newValue: newVal } : void 0
            )
          }
        }
      }
      return r
    }

这里可以看到shallow

let value = shallow ? rawValue : convert(rawValue)

这句话什么意思呢？就是没有**shallow** 对原始的值进行整个**reactive**化，如果有**shallow**，就只对最外层的数据执行监听。

## **shallowRef** ##

shallow式的创建 ref 使用api  **shallowRef**

使用shallowRef

<template>
      <div>
        <h3>shallowReactive</h3>
        <p>state.a == {
       { state.a }}</p>
        <p>state.gf.b == {
       { state.gf.b }}</p>
        <p>state.gf.f.c == {
       { state.gf.f.c }}</p>
        <p>state.gf.f.s.d == {
       { state.gf.f.s.d }}</p>
        <button @click="myFun">改变</button>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          color="#987cb9"
          SIZE="10"
        />
        <h3>shallowRef</h3>
        <p>a:{
       { refState.a }}</p>
        <p>b:{
       { refState.gf.b }}</p>
        <p>c:{
       { refState.gf.f.c }}</p>
        <p>d:{
       { refState.gf.f.s.d }}</p>
        <button @click="myFun1">改变</button>
      </div>
    </template>
    
    <script>
    /*
    1. 递归监听存在的问题
        如果数据量较大，非常消耗性能
    
    2. 非递归监听
      shallowRef / shallowReactive
    
    3. 如何触发非递归监听属性更新页面？
     如果是shallowRef类型数据，可以通过triggerRef来触发
    
    4. 应用场景
    一般情况下我们使用 ref 和 reactive 即可
    只有在需要监听数据量比较大的时候，我们才使用shallowRef/shallowReactive
    */
    import { shallowRef, shallowReactive, triggerRef } from "vue";
    
    export default {
      name: "App",
      // setu函数是组合api的入口函数
      setup() {
        let state = shallowReactive({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun() {
          state.a = 1;
          state.gf.b = 2;
          state.gf.f.c = 3;
          state.gf.f.s.d = 4;
          console.log("state.a", state);
          console.log("state.gf.b", state.gf);
          console.log("state.gf.f.c", state.gf.f);
          console.log("state.gf.f.s.d", state.gf.f.s);
        }
        let refState = shallowRef({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun1() {
          refState.value.a = 1;
          refState.value.gf.b = 2;
          refState.value.gf.f.c = 3;
          refState.value.gf.f.s.d = 4;
    
          //   refState.value = {
          //     a: "1",
          //     gf: {
          //       b: "2",
          //       f: {
          //         c: "3",
          //         s: {
          //           d: "4",
          //         },
          //       },
          //     },
          //   };
    
          // refState.value.gf.f.s.d = 4
          //   注意点：vue3只提供了triggerRef方法，没有提供triggerReactive方法
          //          所以如果是reactive类型的数据，那么是无法主动触发界面更新的
          // triggerRef(refState)
    
          // 注意点：如果是通过shallowRef创建的数据
          // 那么vue监听的是 .value 的变化，并不是第一层的变化
          console.log("refState.a", refState);
          console.log("refState.gf.b", refState.value.gf);
          console.log("refState.gf.f.c", refState.value.gf.f);
          console.log("refState.gf.f.s.d", refState.value.gf.f.s);
        }
    
        return { myFun, state, refState, myFun1 };
      },
    
      methods: {},
    };
    </script>

这个时候我们点击 myFun1 ,会发现控制台提示数据的改变，但是没有实现对界面数据的绑定

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][] 我们主要到，此时的 `RefImpl` 对象（控制台里显示的那个对象）上 `_shallow` 值变为 `true` 。此时，由于只有最外层的数据改变能被监测到，所以只有在直接改变  `.value` 的时候才会产生监测。

<template>
      <div>
        <h3>shallowReactive</h3>
        <p>state.a == {
       { state.a }}</p>
        <p>state.gf.b == {
       { state.gf.b }}</p>
        <p>state.gf.f.c == {
       { state.gf.f.c }}</p>
        <p>state.gf.f.s.d == {
       { state.gf.f.s.d }}</p>
        <button @click="myFun">改变</button>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          color="#987cb9"
          SIZE="10"
        />
        <h3>shallowRef</h3>
        <p>a:{
       { refState.a }}</p>
        <p>b:{
       { refState.gf.b }}</p>
        <p>c:{
       { refState.gf.f.c }}</p>
        <p>d:{
       { refState.gf.f.s.d }}</p>
        <button @click="myFun1">改变</button>
      </div>
    </template>
    
    <script>
    /*
    1. 递归监听存在的问题
        如果数据量较大，非常消耗性能
    
    2. 非递归监听
      shallowRef / shallowReactive
    
    3. 如何触发非递归监听属性更新页面？
     如果是shallowRef类型数据，可以通过triggerRef来触发
    
    4. 应用场景
    一般情况下我们使用 ref 和 reactive 即可
    只有在需要监听数据量比较大的时候，我们才使用shallowRef/shallowReactive
    */
    import { shallowRef, shallowReactive, triggerRef } from "vue";
    
    export default {
      name: "App",
      // setu函数是组合api的入口函数
      setup() {
        let state = shallowReactive({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun() {
          state.a = 1;
          state.gf.b = 2;
          state.gf.f.c = 3;
          state.gf.f.s.d = 4;
          console.log("state.a", state);
          console.log("state.gf.b", state.gf);
          console.log("state.gf.f.c", state.gf.f);
          console.log("state.gf.f.s.d", state.gf.f.s);
        }
        let refState = shallowRef({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun1() {
        //   refState.value.a = 1;
        //   refState.value.gf.b = 2;
        //   refState.value.gf.f.c = 3;
        //   refState.value.gf.f.s.d = 4;
    
            refState.value = {
              a: "1",
              gf: {
                b: "2",
                f: {
                  c: "3",
                  s: {
                    d: "4",
                  },
                },
              },
            };
    
          // refState.value.gf.f.s.d = 4
          //   注意点：vue3只提供了triggerRef方法，没有提供triggerReactive方法
          //          所以如果是reactive类型的数据，那么是无法主动触发界面更新的
          // triggerRef(refState)
    
          // 注意点：如果是通过shallowRef创建的数据
          // 那么vue监听的是 .value 的变化，并不是第一层的变化
          console.log("refState.a", refState);
          console.log("refState.gf.b", refState.value.gf);
          console.log("refState.gf.f.c", refState.value.gf.f);
          console.log("refState.gf.f.s.d", refState.value.gf.f.s);
        }
    
        return { myFun, state, refState, myFun1 };
      },
    
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

## triggerRef  ##

对于 `shallow` 过的 `ref` 对象，我们还可以手动去触发 `ref` 的变化监听事件来实现界面的改变。

使用triggerRef

<template>
      <div>
        <h3>shallowReactive</h3>
        <p>state.a == {
       { state.a }}</p>
        <p>state.gf.b == {
       { state.gf.b }}</p>
        <p>state.gf.f.c == {
       { state.gf.f.c }}</p>
        <p>state.gf.f.s.d == {
       { state.gf.f.s.d }}</p>
        <button @click="myFun">改变</button>
        <hr
          style="filter: alpha(opacity=100, finishopacity=0, style=2)"
          color="#987cb9"
          SIZE="10"
        />
        <h3>shallowRef</h3>
        <p>a:{
       { refState.a }}</p>
        <p>b:{
       { refState.gf.b }}</p>
        <p>c:{
       { refState.gf.f.c }}</p>
        <p>d:{
       { refState.gf.f.s.d }}</p>
        <button @click="myFun1">改变</button>
      </div>
    </template>
    
    <script>
    /*
    1. 递归监听存在的问题
        如果数据量较大，非常消耗性能
    
    2. 非递归监听
      shallowRef / shallowReactive
    
    3. 如何触发非递归监听属性更新页面？
     如果是shallowRef类型数据，可以通过triggerRef来触发
    
    4. 应用场景
    一般情况下我们使用 ref 和 reactive 即可
    只有在需要监听数据量比较大的时候，我们才使用shallowRef/shallowReactive
    */
    import { shallowRef, shallowReactive, triggerRef } from "vue";
    
    export default {
      name: "App",
      // setu函数是组合api的入口函数
      setup() {
        let state = shallowReactive({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun() {
          state.a = 1;
          state.gf.b = 2;
          state.gf.f.c = 3;
          state.gf.f.s.d = 4;
          console.log("state.a", state);
          console.log("state.gf.b", state.gf);
          console.log("state.gf.f.c", state.gf.f);
          console.log("state.gf.f.s.d", state.gf.f.s);
        }
        let refState = shallowRef({
          a: "a",
          gf: {
            b: "b",
            f: {
              c: "c",
              s: {
                d: "d",
              },
            },
          },
        });
        function myFun1() {
        //   refState.value.a = 1;
        //   refState.value.gf.b = 2;
        //   refState.value.gf.f.c = 3;
        //   refState.value.gf.f.s.d = 4;
    
            // refState.value = {
            //   a: "1",
            //   gf: {
            //     b: "2",
            //     f: {
            //       c: "3",
            //       s: {
            //         d: "4",
            //       },
            //     },
            //   },
            // };
    
          refState.value.gf.f.s.d = 4
          //   注意点：vue3只提供了triggerRef方法，没有提供triggerReactive方法
          //          所以如果是reactive类型的数据，那么是无法主动触发界面更新的
          triggerRef(refState)
    
          // 注意点：如果是通过shallowRef创建的数据
          // 那么vue监听的是 .value 的变化，并不是第一层的变化
          console.log("refState.a", refState);
          console.log("refState.gf.b", refState.value.gf);
          console.log("refState.gf.f.c", refState.value.gf.f);
          console.log("refState.gf.f.s.d", refState.value.gf.f.s);
        }
    
        return { myFun, state, refState, myFun1 };
      },
    
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4][]

## shallowReactive ##

同样的，我们还有 `shallowReactive` 来实现类似 `shallowRef` 的功能。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 5][]

我们会发现点击按钮的时候 界面会发生改变，原因很简单：

`shallow` 会监测最外层的变化而请求更新视图层，之前在 `shallowRef` 中的最外层是 `value` ，所以我们只能改变整个 `value` 值来提醒变化，而这里 **`shallowReactive`** 的最外层变成了 **`a`**，而上面的代码改变了 state.a，所以引起了变化

如果我们将 state.a 注释掉就不会引起改变

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 6][]

注意点：

*  vue3只提供了triggerRef方法，没有提供triggerReactive方法
 *  所以如果是reactive类型的数据，那么是无法主动触发界面更新的

*  如果是通过shallowRef创建的数据
 *  那么vue监听的是 .value 的变化，并不是第一层的变化

> 1. 递归监听存在的问题
> 
>      如果数据量较大，非常消耗性能
> 
> 2. 非递归监听
> 
>     shallowRef / shallowReactive
> 
> 3. 如何触发非递归监听属性更新页面？
> 
>       如果是shallowRef类型数据，可以通过triggerRef来触发
> 
> 4. 应用场景
> 
>       一般情况下我们使用 ref 和 reactive 即可
> 
>       只有在需要监听数据量比较大的时候，我们才使用shallowRef/shallowReactive

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221022/5f4019a4c4ea4ca88efbdf896d780aad.png
[20210418233956273.png]: /images/20221022/4b94e880a2284a4184702c1cfc97e401.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/3149288ad39d4d2097fd1feee019bca9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/728c481b43d140db9ec3445b5d6f2273.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/209746a1249b45ed9dc65ee242c5ad17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/3d52538b94ef438aa6571f1050b3ba77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/7ce2d04172414076a5867e1481b45cc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/7f25b671136c4eaaa049d50c365b209c.png