Vue3基础(七)__shallowReactive

回顾：

shallowRef可以将我们传入的数据变成响应式，但是只能是第一层响应式，由于ref响应数据有一个特点，会默认给数据添加到value上。所以使用shallowRef生成的响应式数据只有value层是响应的。

shallowReactive

<template >
  <div class="container">
      <p>{
   {
   shallowReactiveObj.name}}</p>
      <p>{
   {
   shallowReactiveObj.age}}</p>
      <p>{
   {
   shallowReactiveObj.habby.habby1}}</p>
      <button @click="changeHabby1">按钮</button>
  </div>
</template>
<script>
import {
    shallowReactive } from "vue";
export default {
   
  setup() {
   
    let obj = {
   
      name: "zjq",
      age: 123,
      habby: {
   
        habby1: "habby1"
      }
    };
    let shallowReactiveObj = shallowReactive(obj);
    function changeHabby1() {
   
        shallowReactiveObj.habby.habby1 ="hhhhhhh"
    }
    return {
   shallowReactiveObj,changeHabby1}
  }
};
</script>
<style  scoped>
</style>

当点击按钮，改变habby.habby1后页面，页面并没更新，说明shallowReactive也是只能监听到第一层属性改变也就是：name,age,habby。