解决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分页脚本
May 21 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
Vue组件实现触底判断
Jun 26 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php实现天干地支计算器示例
2014/03/14 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python切片知识解析
2016/03/06 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python字符串格式化方式解析
2019/10/19 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python设计密码强度校验程序
2020/07/30 Python
python实现三壶谜题的示例详解
2020/11/02 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
体育专业学生自我评价范文
2014/01/17 职场文书
自我鉴定写作要点
2014/01/17 职场文书
感谢信的格式
2015/01/21 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2016年元旦寄语
2015/08/17 职场文书
小数乘法教学反思
2016/02/22 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电