为什么在Vue3中深层次的对象不会被Vue监视

在Vue2中

        < h1 ref='title'>测试数据< /h1>

                ref可以通过$refs.xxx获取到页面上标签里的ref属性,并且能获取到DOM对象

        < Student ref='stu'>< /Student >

                this.$refs.stu可以获取到子组件的实例 >>>属性 方法

在Vue3中

        ref是基本类型的响应式,作为定义响应式变量

        reactive对象类型的响应式数据

        

        ref在创建变量时必须.value

        reactive在追加对象的时候不能直接追加 否则就会失去响应式 通过Object.assign(旧对象,新对象)

Vue3中深层次的对象不会被Vue监视的原因:

        原因一:可能是因为该响应式数据没有被reactive修饰的响应式对象所以该深层次对象不会被Vue所监视到

        原因二:可能该对象不是一个初始数据 你所要的数据是通过其他的方式去追加到该初始对象中,这样的话Vue只有在修改的时候才会去监视追加后的对象,刷新页面时Vue就不会监视到追加后的对象(总结:该层次对象里 包含的对象不是响应式对象且该对象的数据是后期追加而不是基础数据)

 

 在这段代码中 第一次请求请求到的第一个数据data.records是一个基础数据 是一个订单信息;

在订单信息中还要有订单的详情信息 所以在第二个请求中请求到的数据detail.data.data就是一个深层次对象 如果没有加80行代码 将这个订单详情数据直接push到基础数据中 那么他就是一个深层次的对象 并且这个对象是我们自己追加进去的数据而不是本身就有的数据 所以Vue不会监视到该数据的变化 只有在第一次加载页面时才会显示数据 在刷新页面时 该深层次的对象不会随着orders基础数据的改变而改变

解决方案:将该深层次的对象也写为响应式对象