vue3学习 3.递归监听和非递归监听

1.递归监听

	1.递归监听
		默认情况下,无论是通过ref还是reactive都是递归监听 递归监听是vue将对象包装成Proxy对象 里面的所有数据都能深度监听
	2.递归监听存在的问题
		如果数据量比较大,非常消耗性能
	3.非递归监听
		注意点: 如果是通过shallowRef创建的数据,
		那么vue监听的是.value的变化 并不是第一层的变化.所以如果使用的是shallowRef的话 数据都不会有Proxy对象转化
	4.应用场景
		一般情况下我们是用ref和reactive即可
		只有在需要监听的数据量比较大的时候,我们才是用shallowRef/shallowReactive

递归监听如下图:
这里看到第一层的数据能深度监听 所以页面渲染了 所以下面的1234都改变了 如果把第一层的a注释掉 则下面的数据即使修改了 但是页面不会渲染.

非递归监听:shallowReactive 和 shallowRef

triggerRef方法 主动更新页面重新渲染 和vue2的this.$forceUpdate()类似

注意点:
	vue3中只提供了triggerRef方法,没有提供triggerReactive的方法
	所以没如果是reactive类型的数据,那么无法主动触发页面更新

shallowRef本质

ref -> 本质就是reactive
ref(10) -> 包装reactive({value:10})
shallowRef -> 本质也是shallowReactive
shallowRef(10) -> shallowReactive({value:10})
所以如果是通过shallowRef创建的数据,他监听的是.value的变化
因为底层本质上value才是第一层.