解决vue watch数据的方法被调用了两次的问题


Posted in Javascript onNovember 07, 2020

背景:

路由结构/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数据的方法被调用了两次的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
比较node.js和Deno
Apr 27 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 #Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
js实现日历
Nov 07 #Javascript
工作中常用js功能汇总
Nov 07 #Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 #Javascript
You might like
php实现mysql同步的实现方法
2009/10/21 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php通过各种函数判断0和空
2020/07/04 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
python django集成cas验证系统
2014/07/14 Python
Python中bisect的用法
2014/09/23 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
如何基于python测量代码运行时间
2019/12/25 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
保护环境建议书
2014/03/12 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
工会工作先进事迹
2014/08/18 职场文书
装配出错检讨书
2014/09/23 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang