Vue3递归监听与非递归监听

213 阅读1分钟

递归监听

1.递归监听 默认情况下,无论是通过ref还是reactive都是递归监听 2.递归监听存在的问题 如果数据量比较大,非常消耗性能

在这里插入图片描述

非递归监听

通过shallowReactive只能监听数据第一层 这里除了第一层页面中其他的数据也会渲染是监听到第一层改变触发UI,如果把第一层注释掉其他的就不会变化.

在这里插入图片描述

如果是通过shallowRef监听那么监听的是.value的变化,并不是第一层变化 在这里插入图片描述 只修改部分,vue3只提供了triggerRef方法,reactive无法主动更新 在这里插入图片描述

应用场景

一般情况下我们使用ref和reactive即可,只有在需要监听的数据量比较大的时候,才需要shallowReactive和shallowRef.