vue中watch不触发、不生效的解决办法及原理

vue项目下props传进去的数据,生命周期勾子函数包括watch不触发的解决办法

遇到的问题
- 方案解决过程一
- 方案解决过程二
总结:
更新内容
- 1 常规的监听(watch)
- 2 对象监听

触发的解决办法)

遇到的问题

在深层props过程中，props的数据传到了目标文件但却没有触发数据更新及页面更新；
watch代码如下：

  watch: {uploaConfig(newVal,oldVal){if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {this.moreList = newVal.moreList}}},

vue-devToola数据传递结果如下

方案解决过程一

考虑到使用了对象传递 watch可能无法检测到深层key属性变化，代码改成如下:

 watch: {'uploaConfig.moreList': {handler (newVal) {if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {this.moreList = newVal.moreList}},deep: true}},

结果显而易见还是不行；

方案解决过程二

查阅: vue官方文档.得知如果是想watch检测到值变化并且立刻使用则需要加上 immediate: true,

watch: {'uploaConfig.moreList': {handler (newVal) {if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {this.moreList = newVal.moreList}},deep: true,immediate: true,}}

最后博主问题终于得到解决了

总结:

出现问题尽量先找官网首先确定是自己没有了解到官方api的正确使用或者是一些特定解决方案，如若对您有帮助，麻烦点个赞吧~

20190626更新 | 原文并没有解释清楚为何加上 deep: true或者 immediate: true就可以了，此次更新将加入demo

更新内容

1 常规的监听(watch)

<div class="watch-demo"><div class="watch-demo-item"><input type="text" v-model="val1"><div>{{value1}}</div></div></div>
// ...
data () {return {val1: '',value1: ''}},watch: {val1 (val, oval) {this.value1 = val}},methods: {}

输出:

从上图可以看出，常规的监听和我们想象中的完全一致，理想和实际完美吻合；

2 对象监听

 <div class="watch-demo-item"><input type="text" v-model="obj.val2"><div>{{value2}}</div></div>
// ...data () {return {val1: '',value1: '',obj: {val2: ''},value2: ''}},watch: {val1 (val, oval) {this.value1 = val},obj (val, oval) {this.value2 = val.val2}},methods: {}

输出结果:

咦为何刚才没问题，对象就有问题呢

方法一: 代码调整如下:

 data () {return {val1: '',value1: '',obj: {val2: ''},value2: ''}},watch: {val1 (val, oval) {this.value1 = val},'obj.val2' (val, oval) {this.value2 = val}},methods: {}

此时页面输出:

但现实开发过程中，我们的obj对象很难确定里面的key数量，假如很多个key的时候，总不能写多个监听去监听key吧？此时还有一种方法如下

方法二

data () {return {val1: '',value1: '',obj: {val2: ''},value2: ''}},watch: {val1 (val, oval) {this.value1 = val},'obj': {handler (val, oval) {this.value2 = val.val2},deep: true}},

此时输出如下

解释:handler是watch的高级用法,里面有一个属性 deep，默认值是 false，代表是否深度监听, 还有一个属性 immediate，默认值也是 false ，但immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。deep深度监听会影响性能； 两者可以同时存在；

此次代码演示demo请转王一诺watchDemo.vue

如果对你有帮助麻烦点个赞?

vue中watch不触发、不生效的解决办法及原理相关推荐

vue之 watch 监听数据变化 watch的使用、watch监听数据加载完成后执行、watch不触发、不生效的解决办法及原理
常用方法: watch监听数据完成后执行函数: watch: {huxing: {handler: function(newVal, oldVal) {this.huxingW();},deep: t ...
Vue中:error ‘XXXXX‘ is not defined no-undef解决办法
Vue中:error 'XXXXX' is not defined no-undef解决办法语法没错居然报错了解决方法: 拓展语法没错居然报错了解决方法: 在使用vue的时候,使用一个全局变量 ...
Vue中error ‘XXXXX‘ is not defined no-undef解决办法
Vue中:error 'XXXXX' is not defined no-undef解决办法语法没错居然报错了解决方法: 拓展语法没错居然报错了解决方法: 在使用vue的时候,使用一个全局变量 ...
vue中控制台报错[WDS] Disconnected的解决办法
方法一: 有的说使用了全局代理,将 loaclhost 改成 127.0.0.1 vue.config.js配置项 // 配置 webpack-dev-server 行为.devServer: {un ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
php 析构不执行,PHP析构方法 __destruct() 不触发的两个解决办法
本篇文章主要给大家介绍PHP 析构方法 __destruct() 不触发的两个解决办法. 有时候在 PHP 里类循环引用时,会导致 __destruct() 不触发的问题,先上问题代码:<?ph ...
jenkins调整jdk版本不生效的解决办法
jenkins调整jdk版本不生效的解决办法由于项目统一环境的需要,需要将jdk版本从7降到6,通过修改"系统管理"菜单下的"系统设置"下的jdk环境变量: ...
mouseup 左键_javascript中mouseup事件丢失的原因与解决办法
这篇文章主要跟大家介绍了关于Javascript中mouseup事件丢失的原因与解决办法的相关资料,文中给出详细的示例代码供大家参考学习,需要的朋友们下面跟着小编一起来学习学习吧. 前言当实现类似E ...
虚拟机中火狐连不上服务器,VMware虚拟机中Ubuntu18.04无法连接网络的解决办法
VMware虚拟机中Ubuntu18.04无法连接网络的解决办法虚拟机中Ubuntu18.04无法连接网络的解决办法,具体内容如下对VMware虚拟机进行恢复默认网络设置恢复虚拟网络默认设置(在 ...