业务中关于响应式的闹剧

最近做一个业务,我本以为项目是vue3,然后想当然的认为data中的数据都是通过proxy代理的,问题也就出在这里。业务情景是往一个数组里面添加元素,每个元素都是一个对象,如果按照vue3的proxy去实现响应式,那肯定得对这个数组代理进行修改才能触发响应式系统的监听,但是,修改了原始传入的对象的属性,居然页面也可以更新!!!我无比震惊,想了很久,重新学了一遍proxy,还去看了一下vue3源码,自己在控制台上试了很多,修改原始对象是不可能触发proxy的set的,vue3页没有做原始对象向代理的映射,也就没办法触发更新。百思不得其解之际,我看了一下package.json,发现这个项目居然是vue2的(脑子进水了,选项式的写法且没有setup,那肯定是vue2啊)。如果是vue2那就解释通了,因为vue仅仅是通过defineProperty来给原始对象加上get和set进行拦截,也就是我通过数组去访问添加的元素,还是直接访问元素,都是同一个对象的引用,vue2内部的深层递归嵌套保证了我改变对象的某个值,还是会能够监听到这个变化去渲染界面。舒服了,终于搞清楚了

你可能感兴趣的:(vue2.0学习,vue3.0,vue.js,javascript,前端)