【Vue系列

2023-11-18 13:15| 来源: 网络整理| 查看: 265

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

我们知道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

【本文地址】

【Vue系列

【Vue系列

今日新闻

推荐新闻