10-28 01:13 阅读 59

【Vue系列-3】关于响应式深度监听和非深度监听

我们知道ref函数和reactive函数用于将一个普通数据变成一个响应式的数据。当数据发生改变时，界面也会立即更新。其实还有一个规律，就是是深度监听数据的每一层，我们称之为递归监听

import { reactive } from "vue"; export default {   setup() {    const alice =  {        name: "Alice",        age: 80,       sex: 'female',       child:{         name:'Tom',         sex: 'male',         age:59,         child:{           name:'Frank',           sex: 'male',           age:30,           child:{             name:'Blue',             sex: 'male',             age:3           }         }     }}     const AliceFamily = reactive(alice );     return { AliceFamily };   }, }; 复制代码

如上例子，vue会通过reactive函数将我们传递的对象alice的每一层打包成一个proxy对象，深度监听对象的每一层的每一个数据，当任意一层的任意一个数据发生改变，vue都会检测到，并更新对应的UI ref也是类似，因为ref的本质也是reactive

ref(12)  相当于  reactive({value:12}) 复制代码

递归监听的好处显而易见，可以监听到每一个数据的变化，但正因为要监听每一个数据，当数据非常复杂时，vue要讲每个数据都通过Proxy包装一次，数据量大的话这个过程是非常消耗性能的。所以为了解决这个问题，vue3提供了两个函数用于创建浅度监听数据，即非递归监听。这两个函数是：

shallowRef
shallowReactive

使用过程中需要注意：

如果是通过shallowRef创建数据，那么vue监听的是.value的变化，而不是第一层的变化
另外vue3还提供了triggerRef函数，用于手动更新界面UI。但是没有提供triggerReactive，所以如果是reactive的数据，那是无法手动触发界面更新的。

那有人会想：在什么情况下用递归监听，什么情况下用非递归监听呢？其实只要记住，非递归监听是为了解决监听数据量大的问题而出现的，所以只有当数据量非常大时，我们才考虑用shallowRef和shallowReactive，一般情况下都使用ref和reactive

作者：Andy_W
链接：https://juejin.cn/post/7023942419339034637