vue3递归监听和非递归监听

我们知道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提供了两个函数用于创建浅度监听数据，即非递归监听。这两个函数是：

1. shallowRef
2. shallowReactive

使用过程中需要注意：

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

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

以上就是vue3递归监听和非递归监听基本使用！