解决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 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python绘图方法实例入门
2015/05/19 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python 26进制计算实现方法
2015/05/28 Python
python用插值法绘制平滑曲线
2021/02/19 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
详解python中index()、find()方法
2019/08/29 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
Why do we need Unit test
2013/01/03 面试题
AJax面试题
2014/11/25 面试题
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
万能检讨书2000字
2014/10/17 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
同学聚会祝酒词
2015/08/10 职场文书