解决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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
javascript英文日期(有时间)选择器
May 02 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JavaScript事件 "事件对象"的注意要点
Jan 14 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
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 获取完整url地址
2008/12/20 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
行政文员岗位职责
2013/11/08 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
服务承诺书格式
2014/05/21 职场文书
仲裁协议书
2014/09/26 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
十八大观后感
2015/06/12 职场文书
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL