解决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 相关文章推荐
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
react基本安装与测试示例
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
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python实现比较文件内容异同
2018/06/22 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python 列表推导式使用详解
2019/08/29 Python
python 字典访问的三种方法小结
2019/12/05 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
PyQt5实现画布小程序
2020/05/30 Python
python 爬虫请求模块requests详解
2020/12/04 Python
python的dict判断key是否存在的方法
2020/12/09 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
关于环保的演讲稿
2014/05/10 职场文书
物资采购方案
2014/06/12 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
详解Redis主从复制实践
2021/05/19 Redis
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript