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

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

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

瀏覽:94日期: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
相關文章:
主站蜘蛛池模板: 深圳侦探联系方式_深圳小三调查取证公司_深圳小三分离机构 | 电子天平-华志电子天平厂家| 斗式提升机,斗式提升机厂家-淄博宏建机械有限公司 | 卫浴散热器,卫浴暖气片,卫生间背篓暖气片,华圣格浴室暖气片 | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 超声骨密度仪-动脉硬化检测仪器-人体成分分析仪厂家/品牌/价格_南京科力悦 | 纳米二氧化硅,白炭黑,阴离子乳化剂-臻丽拾科技 | 无菌检查集菌仪,微生物限度仪器-苏州长留仪器百科 | LOGO设计_品牌设计_VI设计 - 特创易 | 磁棒电感生产厂家-电感器厂家-电感定制-贴片功率电感供应商-棒形电感生产厂家-苏州谷景电子有限公司 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 手表腕表维修保养鉴定售后服务中心网点 - 名表维修保养 | 上海租车公司_上海包车_奔驰租赁_上海商务租车_上海谐焕租车 | 聚氨酯保温钢管_聚氨酯直埋保温管道_聚氨酯发泡保温管厂家-沧州万荣防腐保温管道有限公司 | 葡萄酒灌装机-食用油灌装机-液体肥灌装设备厂家_青州惠联灌装机械 | 手术室净化厂家-成都做医院净化工程的公司-四川华锐-15年特殊科室建设经验 | 雷冲击高压发生器-水内冷直流高压发生器-串联谐振分压器-武汉特高压电力科技有限公司 | 英超直播_英超免费在线高清直播_英超视频在线观看无插件-24直播网 | 雷达液位计_超声波风速风向仪_雨量传感器_辐射传感器-山东风途物联网 | 电脑知识|软件|系统|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网 | arch电源_SINPRO_开关电源_模块电源_医疗电源-东佑源 | 防火门|抗爆门|超大门|医疗门|隔声门-上海加汇门业生产厂家 | 反渗透阻垢剂-缓蚀阻垢剂厂家-循环水处理药剂-山东鲁东环保科技有限公司 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 今日娱乐圈——影视剧集_八卦娱乐_明星八卦_最新娱乐八卦新闻 | 北京四合院出租,北京四合院出售,北京平房买卖 - 顺益兴四合院 | 穿线管|波纹穿线管|包塑金属软管|蛇皮管?闵彬专注弱电工程? | 航空铝型材,7系铝型材挤压,硬质阳*氧化-余润铝制品 | 挖掘机挖斗和铲斗生产厂家选择徐州崛起机械制造有限公司 | CE认证_FCC认证_CCC认证_MFI认证_UN38.3认证-微测检测 CNAS实验室 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 托利多电子平台秤-高精度接线盒-托利多高精度电子秤|百科 | 鑫铭东办公家具一站式定制采购-深圳办公家具厂家直销 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | TMT观察网_独特视角观察TMT行业 派财经_聚焦数字经济内容服务平台 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 湖南自考_湖南自学考试网 | 电销卡 防封电销卡 不封号电销卡 电话销售卡 白名单电销卡 电销系统 外呼系统 | 微型实验室真空泵-无油干式真空泵-微型涡旋耐腐蚀压缩机-思科涡旋科技(杭州)有限公司 |