VUE 3.X——递归监听与非递归监听

最新推荐文章于 2023-10-09 10:23:36 发布

原创最新推荐文章于 2023-10-09 10:23:36 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #vue.js #javascript #前端

vue3.X 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue3.X中递归监听与非递归监听的工作原理及应用场景。递归监听适用于大多数情况，通过Proxy实现数据的双向绑定。而非递归监听则通过shallowReactive、shallowRef和triggerRef来实现，适用于数据量特别大的场景。

递归监听

Vue3.X是通过ES6的 Proxy 实现数据的双向绑定（即只有包装成 Proxy 的数据才会主动更新视图），即它会把 ref 和 reactive 的所有子节点包装成 Proxy 并进行视图更新，因此，如果数据量过大，递归监听会非常消耗性能，例：

<template>
   <ul>
    <li>{{ test.a }}</li>
    <li>{{ test.gf.b }}</li>
    <li>{{ test.gf.f.c }}</li>
    <li>{{ test.gf.f.s.d }}</li>
  </ul>
  <button @click="changeToNum">测试递归监听</button>
</template>

setup() {
  // let test = reactive({
  let test = ref({
      a: 'a',
      gf: {
          b: 'b',
          f: {
              c: 'c',
              s: {
                  d: 'd'
              }
          }
      }
  });
  function changeToNum() {
    // test.a = '1';
    // test.gf.b = '2';
    // test.gf.f.c = '3';
    // test.gf.f.s.d = '4';

    // console.log(test);
    // console.log(test.gf);
    // console.log(test.gf.f); 
    // console.log(test.gf.f.s);

    test.value.a = '1';
    test.value.gf.b = '2';
    test.value.gf.f.c = '3';
    test.value.gf.f.s.d = '4';

    console.log(test); 
    console.log(test.value); 
    console.log(test.value.gf);
    console.log(test.value.gf.f);
    console.log(test.value.gf.f.s);
  }
  return {test, changeToNum};
}

非递归监听

非递归监听只能监听第一层的数据变化，主要用到的方法有 shallowReactive shallowRef 和 triggerRef

shallowReactive 会把 reactive 类型的数据的第一层包装成 Proxy ，因此如果更新了数据的第一层，视图会主动更新，例：

import {shallowReactive} from 'vue'; 
export default {
    name: 'App2',
    setup() {
        let state = shallowReactive({
            a: 'a',
            gf: {
              b: 'b',
              f: {
                c: 'c',
                s: {
                  d: 'd'
                }
              }
            }
        });
       	function changeToNum() {
            state.a = '1'; //如果注释这一句，视图将不会主动更新
            state.gf.b = '2';
            ...
            console.log(state);
            console.log(state.gf);
            ...
        }
        return {state, changeToNum};
    }
}

shallowRef 会把 .value 包装成 Proxy （类比 ref(10) 的实质是 reactive({ value: 10}) ），所以如果想更新视图，则要更新 value ，例：

import {shallowRef} from 'vue'; 
export default {
    name: 'App2',
    setup() {
        let state = shallowRef({
            a: 'a',
            gf: {
              b: 'b',
              f: {
                c: 'c',
                s: {
                  d: 'd'
                }
              }
            }
        });
        function changeToNum() {
            state.value = {
                a: '1',
                gf: {
                  b: 'b',
                  f: {
                    c: 'c',
                    s: {
                      d: 'd'
                    }
                  }
                }
            };
            // state.value.a = '1' // 这样写视图不会更新
            state.value.gf.b = '2';
            ...
            console.log(state);
            console.log(state.value);
            ...
        }
        return {state, changeToNum};
    }
}

triggerRef 是Vue 3.X提供的单独更新数据类型为 ref 的某一项数据的方法，要注意的是，Vue3.X只提供了 triggerRef ，没有提供 triggerReactive ，所以 reactive类型数据无法主动更新页面，例：

import {ref,triggerRef} from 'vue'; 
export default {
    name: 'App2',
    setup() {
        let state = ref({
            a: 'a',
            gf: {
              b: 'b',
              f: {
                c: 'c',
                s: {
                  d: 'd'
                }
              }
            }
        });
        function changeToNum() {
            state.value.gf.f.s.d = '4';
            triggerRef(state);
        }
        return {state, changeToNum};
    }
}