电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue watch數據的方法被調用了兩次的問題

瀏覽:97日期:2022-11-04 18:59:17

背景:

路由結構/video/1.mp4,即/video是父路由,/1.mp4是/video的動態子路由,在/video父路由中會通過url的params獲取視頻信息,即通過/1.mp4獲取對應的視頻完整信息,然后通過props傳到動態子路由中,然后子路由通過接受到的視頻對象,進行展示

問題:

當路由切換時,即當我點擊其他視頻時,導致動態子路由變化時,我監聽了/video父路由的變化并重新根據url的params獲取視頻對象,并自動通過props傳入子路由中,我在子路由中通過watch 視頻對象來進行一些操作,結果

watch: { video () { console.log('test') }}

test被打印了兩次,通過一番查找,才發現,當子路由切換時,父路由/video中的data數據都會被初始化為默認值,所以導致video對象變化了兩次,一次是因為初始化被重置為默認值空對象,一次是請求后的正確數據

結局:

將video對象存到vuex中,然后父路由將vuex中的video對象傳給子路由就行了

補充知識:vue watch一個對象或數組時,newvalue和oldvalue一樣

在官方的代碼改寫了一下,當深度watch一個對象時,newval和oldval的值為什么是相等的呢?

var vm = new Vue({ data: { a: 1, c:{ c1:1, c2:2 } }, watch: { ’a’: function (val, oldVal) { console.log(val, oldVal,(val== oldVal)) }, // 方法名 ’b’: ’someMethod’, // 深度 watcher ’c’: { handler: function (val, oldVal) { console.log(val, oldVal,(val== oldVal)) }, deep: true } }}) vm.a = 2 vm.c.c1 = 2

和深度無關,而是在修改(不是替換)對象或數組時,舊值將與新值相同,因為它們索引同一個對象/數組。Vue 不會保留修改之前值的副本。

以上這篇解決vue watch數據的方法被調用了兩次的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 广州/东莞小字符喷码机-热转印打码机-喷码机厂家-广州瑞润科技 | 清水混凝土修复_混凝土色差修复剂_混凝土色差调整剂_清水混凝土色差修复_河南天工 | 包装盒厂家_纸盒印刷_礼品盒定制-济南恒印包装有限公司 | 臭氧实验装置_实验室臭氧发生器-北京同林臭氧装置网 | 27PR跨境电商导航 | 专注外贸跨境电商 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 废水处理-废气处理-工业废水处理-工业废气处理工程-深圳丰绿环保废气处理公司 | 深圳富泰鑫五金_五金冲压件加工_五金配件加工_精密零件加工厂 | 精准猎取科技资讯,高效阅读科技新闻_科技猎 | 微型实验室真空泵-无油干式真空泵-微型涡旋耐腐蚀压缩机-思科涡旋科技(杭州)有限公司 | 医用酒精_84消毒液_碘伏消毒液等医用消毒液-漓峰消毒官网 | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | 车辆定位管理系统_汽车GPS系统_车载北斗系统 - 朗致物联 | 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 双杰天平-国产双杰电子天平-美国双杰-常熟双杰仪器 | 济南轻型钢结构/济南铁艺护栏/济南铁艺大门-济南燕翔铁艺制品有限公司 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 | 不锈钢发酵罐_水果酒发酵罐_谷物发酵罐_山东誉诚不锈钢制品有限公司 | 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 施工电梯_齿条货梯_烟囱电梯_物料提升机-河南大诚机械制造有限公司 | 防腐储罐_塑料储罐_PE储罐厂家_淄博富邦滚塑防腐设备科技有限公司 | 气体热式流量计-定量控制流量计(空气流量计厂家)-湖北南控仪表科技有限公司 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网 | 蚂蚁分类信息系统 - PHP同城分类信息系统 - MayiCMS | 茶楼装修设计_茶馆室内设计效果图_云臻轩茶楼装饰公司 | 电地暖-电采暖-发热膜-石墨烯电热膜品牌加盟-暖季地暖厂家 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 渣土车电机,太阳能跟踪器电机,蜗轮蜗杆减速电机厂家-淄博传强电机 | 企业微信scrm管理系统_客户关系管理平台_私域流量运营工具_CRM、ERP、OA软件-腾辉网络 | 牛皮纸|牛卡纸|进口牛皮纸|食品级牛皮纸|牛皮纸厂家-伽立实业 | 济南侦探调查-济南调查取证-山东私家侦探-山东白豹调查咨询公司 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 | 德州网站开发定制-小程序开发制作-APP软件开发-「两山开发」 | 保定市泰宏机械制造厂-河北铸件厂-铸造厂-铸件加工-河北大件加工 | 考勤系统_人事考勤管理系统_本地部署BS考勤系统_考勤软件_天时考勤管理专家 | 广州展台特装搭建商|特装展位设计搭建|展会特装搭建|特装展台制作设计|展览特装公司 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 微量水分测定仪_厂家_卡尔费休微量水分测定仪-淄博库仑 |