vue3中shallowReactive与shallowRef

本文介绍: shallowReactive: 只处理了对象内最外层属性的响应式(也就是浅响应式)shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

shallowReactive: 只处理了对象内最外层属性的响应式(也就是浅响应式)

shallowRef: 只处理了value的响应式, 不进行对象的reactive处理

reactive与ref实现的是深度响应式, 而shallowReactive与shallowRef是浅响应式。

一般情况下使用ref和reactive即可,

如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive

<template>
  <div style="font-size: 14px;">
    <p>m1: {{m1}}</p>
    <p>m2: {{m2}}</p>
    <p>m3: {{m3}}</p>
    <p>m4: {{m4}}</p>
    <button @click="update2">无法更新</button>
    <button @click="update">更新</button>
    <button @click="update3">有坑能更新</button>
  </div>
</template>
<script lang="ts">
/* 
shallowReactive与shallowRef
  shallowReactive: 只处理了对象内最外层属性的响应式(也就是浅响应式)
  shallowRef: 只处理了value的响应式, 不进行对象的reactive处理
总结:
  reactive与ref实现的是深度响应式, 而shallowReactive与shallowRef是浅响应式
  什么时候用浅响应式呢?
    一般情况下使用ref和reactive即可,
    如果有一个对象数据, 结构比较深, 但变化时只是外层属性变化 ===> shallowReactive
    如果有一个对象数据, 后面会产生新的对象来替换 ===> shallowRef
isReactive: 
  检查一个对象是否是由 reactive 创建的响应式代理
*/

import {
  defineComponent,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
  isReactive,
} from 'vue'
// vue3.0版本语法
export default defineComponent({
  setup () {
    const m1 = reactive({x: '1', y: {z: 'abc'}})
    const m2 = shallowReactive({x: 1, y: {z: 'abc'}})
    const m3 = ref({a1: 2, a2: {a3: 'abc'}})
    const m4: any = shallowRef({a1: 2, a2: {a3: 'abc'}})
    console.log(isReactive(m1.y))
    console.log(isReactive(m2.y))
    console.log(isReactive(m3.value.a2))
    console.log(isReactive(m4.value.a2))

    function update() {
      m1.x = 'm1.x--update' // 界面会更新
      m1.y.z = 'm1.y.z--update' // 界面会更新
      m2.y = {z: 'm2.y.z--update'}  // 界面会更新
      m3.value.a2.a3 = 'm3.value.a2.a3--update' // 界面会更新
      m4.value = {} // 界面会更新
    }
    function update2() {
      m2.y.z = 'm2--update' // 界面本不会更新
      m4.value.a1 += 1 // 界面本不会更新
      console.log(m2,m4);
      console.log(m4.value);
    }
    function update3() {
      m1.x = 'm1.x--update' // 界面会更新
      // m1.y.z = 'm1.y.z--update' // 界面会更新
      // m2.y = {z: 'm2.y.z--update'}  // 界面会更新
      // m3.value.a2.a3 = 'm3.value.a2.a3--update' // 界面会更新
      // m4.value = {} // 界面会更新

      // 模板更新的机制是：只要模板里有一个具有响应式的值更新了：
      // 就把模板里的对象去源数据里面重新取一遍值。重新取值的时候，
      // m2.y.z 被修改了（确实没有响应性），页面取到是最新的值。
      m2.y.z = 'm2--update' // 界面本不会更新(由于m1响应式更新了页面导致会更新)
      m4.value.a1 += 1 // 界面本不会更新(由于m1响应式更新了页面导致会更新)
      console.log(m2,m4);
      console.log(m4.value);
    }

    return {
      m1,
      m2,
      m3,
      m4,
      update,update2,update3
    }
  }
})
</script>