vue3中shallowReactive对比reactive、shallowRef对比ref以及triggerRef作用

一、shallowReactive对比reactive

• 使用reactive声明的变量为递归监听，使用shallowReactive声明的变量为非递归监听（通俗的讲就是reactive创建的对象将会被vue内部进行递归监听，可以监听到对象中的对象是否发生了改变从而更新视图，而shallowReactive创建的对象只能监听到首层对象的变化）。

<template>
  <!-- reactive -->
  <div>{{ reactiveState }}</div>
  <button @click="reactiveStateChange">改变reactiveState.b.c</button>

  <!-- shallowReactive -->
  <div>{{ shallowReactiveState }}</div>
  <button @click="shallowReactiveChange">改变shallowReactiveState.b.c</button>
</template>

<script>
import { shallowReactive, reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const reactiveState = reactive({
      a: 'a',
      b: {
        c: 'c',
        d: {
          e: 'e',
        },
      },
    })
    function reactiveStateChange() {
      reactiveState.b.c = 99999
      console.log(reactiveState, 'reactiveState发生了变化且视图更新了')
    }
    const shallowReactiveState = shallowReactive({
      a: 'a',
      b: {
        c: 'c',
        d: {
          e: 'e',
        },
      },
    })
    function shallowReactiveChange() {
      shallowReactiveState.b.c = 99999
      console.log(shallowReactiveState, 'shallowReactiveState发生了变化但视图未更新')
      // 打开下方这行注释视图将进行更新（因为首层对象发生了改变）
      // shallowReactiveState.a = 99999
    }
    return {
      reactiveState,
      reactiveStateChange,
      shallowReactiveState,
      shallowReactiveChange,
    }
  },
}
</script>

二、shallowRef对比ref

• ref底层相当于调用了一次reactive，并且使用value包裹了创建的变量。

const state = ref(false)
    等价于
const state = reactive({
    value: false,
})

• 其中shallowRef为非递归监听，ref为递归监听，与shallowReactive和reactive不同的是shallowRef和ref监听的对象首层是value这一层，只有当value发生改变时shallowRef声明的变量才会在视图上进行更新。

<template>
  <div>{{ shallowRefState }}</div>
  <button @click="shallowRefChange">改变state.b.c</button>
</template>

<script>
import { shallowRef, ref, triggerRef } from 'vue'
export default {
  name: 'App',
  setup() {
    const shallowRefState = shallowRef({
      a: 'a',
      b: {
        c: 'c',
        d: {
          e: 'e',
        },
      },
    })
    function shallowRefChange() {
      shallowRefState.value.b.c = 99999
      console.log(shallowRefState, 'shallowRefChange发生了变化但视图未更新')
      // 打开下方代码视图才会进行更新（原因是shallowRefState首层value发生了改变）
      // shallowRefState.value = {
      //   a: 'a',
      //   b: {
      //     c: '变化的数据',
      //     d: {
      //       e: 'e',
      //     },
      //   },
      // }
    }
    return {
      shallowRefState,
      shallowRefChange,
    }
  },
}
</script>

三、triggerRef的作用

• 上文第二点我们说到只有当value发生改变时shallowRef声明的变量才会在视图上进行更新，而triggerRef的作用则是手动执行与 shallowRef 关联的任何副作用，强制更新视图。

<template>
  <div>{{ shallowRefState }}</div>
  <button @click="shallowRefChange">改变state.b.c</button>
</template>

<script>
import { shallowRef, ref, triggerRef } from 'vue'
export default {
  name: 'App',
  setup() {
    const shallowRefState = shallowRef({
      a: 'a',
      b: {
        c: 'c',
        d: {
          e: 'e',
        },
      },
    })
    function shallowRefChange() {
      shallowRefState.value.b.c = 99999
      triggerRef(shallowRefState)
    }
    return {
      shallowRefState,
      shallowRefChange,
    }
  },
}
</script>

四、没有triggerReactive！没有triggerReactive！没有triggerReactive！