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的数据,那是无法手动触发界面更新的。

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

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

You may also like...

退出移动版