vue3的shallowReactive函数-当改变第二层数据页面不会变，但在改变第一层基本数据类型的值时，第二层数据会变成第一次改变的值，

Question

问题遇到的现象

以下是部分代码

  <button @click="person.firstName += '!'">修改姓</button>
  <button @click="person.lastName += '~'">修改名</button>
  <button @click="person.job.j1.salary++">涨资</button>
  <button @click="person.arr[0]++">修改数组第一个值</button>

let person = shallowReactive({
      firstName: "",
      lastName: "",
      job: {
        j1: {
          salary: 20,
        },
      },
      arr: [1, 2, 3, 4, 5],
    });

Answer 1

vue的机制。
尝试新建对象。去更新数据。
尽量不要在原有数据上进行数据操作。
https://cn.vuejs.org/v2/guide/reactivity.html
你可以直接设置 data中的任意参数。
但是不要设置 data中任意参数中的值。