解决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获取input的value问题说明
Aug 19 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
JS原生实现轮播图的几种方法
Mar 23 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
php Memcache 中实现消息队列
2009/11/24 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
php静态文件生成类实例分析
2015/01/03 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
应征英语教师求职信
2013/11/27 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
体育教师求职信
2014/06/30 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
工程部岗位职责
2015/02/10 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
学校财务管理制度
2015/08/04 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang