当前位置:首页 » 《我的小黑屋》 » 正文

vue2使用watch监听对象变化不起作用

7 人参与  2024年10月18日 13:20  分类 : 《我的小黑屋》  评论

点击全文阅读


今天使用vue2的watch属性时真的气死我了,将父组件的对象传递给子组件,子组件用watch来接受,但是结果就是不如意,父组件的对象怎么改变,子组件的watch方法就是没反应。

最后百度了下才知道vue2中的props的设计模式为单向数据流,就是说只能从父组件流向子组件,子组件是无法流回父组件,也就是无法从子组件修改父组件传来的值。至于为什么vue2无法直接监听对象呢,一开始以为是Object.defineProperty的问题,但是后来做了实验发现和它也没啥关系,主要是vue2.x为了提高数据绑定的性能主动放弃这样监听模式

因此我们在监听时应该通过computed函数来中转下,在computed函数中定义专门返回自己监听的对象,然后在watch中监听自己所定义的方法。代码如下:

    props: {        unReadObj: {            type: Object,            default: null        }    },    computed:{        // 定义方法,返回自己监听的值        getUnReadObj(){            return this.unReadObj        }    },    watch: {        getUnReadObj:{            handle(new_o1,old_o2){                console.log(new_o1,old_o2)            },            // 深度监听,在vue3中使用immediate来开启深度监听            deep:true,        }    },

其他传值的逻辑正常写就行

以上属于个人的小笔记,也是小见解,如果有错误一定立刻改正。。。


点击全文阅读


本文链接:http://zhangshiyu.com/post/173610.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1