Vue 3ベース(七)_shallowReactive

レビュー:
shallowRefは、私たちが入力したデータを応答式にすることができますが、ref応答データにはデフォルトでvalueに追加される特徴があるため、第1層応答式のみです.したがって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を変更します.habby 1以降のページは、ページが更新されていません.shallowReactiveも、最初のレイヤのプロパティの変更、すなわちname、age、habbyしか傍受できないことを示しています.