Vue3中的shallowReactive监听问题

Question

问题遇到的现象和发生背景

Vue3中的 shallowReactive 定义的对象，深层次数据改变之后，会被监听到
通过方法改变的salary会被监听到，直接在页面上修改的不会被监听到

问题相关代码，请勿粘贴截图

<h3>对象shallowReactive：{{shallowObj}}</h3>
<h3>对象shallowReactive：{{shallowObj.job.j1.salary}}</h3>
<button @click="ageAdd">更新字段</button>会被监听到<br/>
<button @click="shallowObj.job.j1.salary ++">增加薪资</button>不会被监听到

import { shallowReactive } from 'vue'
export default {
  setup(){
    let shallowObj = shallowReactive({
      name:'name',
      job:{
        j1:{
          salary:30
        }
      }
    })
    function ageAdd(){
      shallowObj.name +='~'
      shallowObj.job.j1.salary ++
      console.log(shallowObj);
    }
    return {
      ageAdd,
      shallowObj,
    }
  },
}

Answer 1

因为你改了 name
over