vue中watch不触发、不生效的解决办法及原理 |
您所在的位置：网站首页 › 修改器失效 › vue中watch不触发、不生效的解决办法及原理 |
vue中watch不触发、不生效的解决办法及原理
|
vue项目下props传进去的数据,生命周期勾子函数包括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) {{value1}} // ... data () { return { val1: '', value1: '' } }, watch: { val1 (val, oval) { this.value1 = val } }, 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 如果对你有帮助麻烦点个赞? |
【本文地址】