解决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 相关文章推荐
jQuery之ajax删除详解
Feb 27 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
详解Vue 单文件组件的三种写法
Feb 19 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python爬取成语接龙类网站
2018/10/19 Python
深入浅析Python中的迭代器
2019/06/04 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
利用python开发app实战的方法
2019/07/09 Python
Django接收自定义http header过程详解
2019/08/23 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
自荐信写法介绍
2014/01/25 职场文书
银行优秀员工事迹
2014/02/06 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2015年端午节活动总结
2015/02/11 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Python读写yaml文件
2022/03/20 Python