vue多个页面引用相同组件 在一个页面修改数据 多个页面受影响

这篇博客探讨了在Vue应用中遇到的问题,即页面引用树结构在修改时导致已选择的数据意外变更,无论路由是否活跃。作者发现该问题源于组件的mounted和watch生命周期钩子。解决方案是将这些钩子替换为activated,以确保仅在页面激活时更新数据。activated在页面重新进入时触发,适合用于初始化页面状态,而created和mounted则在组件创建和挂载时执行,不适用于此场景。
摘要由CSDN通过智能技术生成

例如 多个页面引用树结构 当页面修改树结构默认值时 离开的页面选择的树的数据会被修改
查看很久 发现不管当前路由是否为active 都会被修改

解决办法:将树组件中的mounted和watch改为activated

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等;

created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;

mounted():钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值