vue3.0中的shallowReactive与shallowRef

shallowReactive：
在vue3.0中，通过reactive可以将对象变为响应式的，即当视图已经生成之后，数据对象属性值在发生变化的时候，视图也会跟着更新。reactive可以做到深层次属性变为响应式，但是有的时候如果包装的对象有过多属性而又不需要设置相应，无疑是性能浪费，这个时候可以用到shallowReactive。

用法如下图：

<template>
  <div>
    <h2>shallowreactive和shallowref</h2>
    <h3>m1:{{m1}}</h3>
    <h3>m2:{{m2}}</h3>
    <button @click="update">更新数据</button>
  </div>
</template>


<script lang="ts">
import { computed, defineComponent,reactive,ref, 
  shallowReactive,   } from 'vue'
export default defineComponent({
    setup(){
      const m1 = reactive({
        name:'鸣人',
        age:20,
        car:{
          name:'奔驰',
          color:'red'
        }
      })
      const m2 = shallowReactive({
        name:'鸣人',
        age:20,
        car:{
          name:'奔驰',
          color:'red',
          car1:{
            name:'奔驰',
            color:'red'
          }
        }
      })
      const update = () => {
        m2.car.car1.name += '---'
        console.log(m2)
      }
      return {
        m1,m2,m3,m4,
        update
      }
    }
})
</script>

这是初始效果图：

点击按钮，更新数据，car的名字发生了变化

接下来咱们修改一下代码

const update = () => {
  m2.car.name += '---'
}

点击按钮，可以看到m2的第二层属性值并没有发生变化

细节：
如果被shallowReactive包裹的对象的第一层同时跟着发生变化，这一特效会消失

const update = () => {
  m2.name += '---'
  m2.car.name += '---'
}

可以看到m2的第一层和第二层属性值都进行了更新：

shallowRef：
shallowRef只进行value的响应式处理，不进行对象的reactive处理，ref也可以包裹对象，是进行了reactive处理的

const m3 = ref({
   name:'鸣人',
   age:20,
   car:{
     name:'奔驰',
     color:'red',
     
   }
 })
 const m4 = shallowRef({
   name:'鸣人',
   age:20,
   car:{
     name:'奔驰',
     color:'red'
   }
 })

ref第一层和深层次都会起到响应式效果，而shallowRef完全没有响应式效果
ref的效果验证：
浅层次：

const update = () => {
  m3.value.name += '---'
}

效果图：
点击按钮，m3的第一层发生了变化

**深层次：

const update = () => {
  m4.value.car.name += '---'
}

效果图：

点击按钮，m3的第二层发生了变化

shallowRef的效果验证：
浅层次：

const update = () => {
  m4.value.name += '---'
}

效果图：
点击按钮，m4的第一层没有跟着变化

深层次：

const update = () => {
  m4.value.car.name += '---'
}

效果图：
点击按钮，m4的第二层没有跟着变化

总结：
（1）被ref和reactive包裹的对象浅层次和深层次都会做到响应式
（2）shallowReactive包裹的对象深层次做不到响应式
（3）shallowRef包裹的对象浅层次和深层次都做不到响应式