网站建设费用先付一半,网站建设课程设计论文,wordpress 加载次序,免费自助建站软件watch监听
执行的时候#xff0c;watch方法未执行。并没有报错
遇见的问题
子组件#xff0c;定义了props#xff0c;属性里有一个selectedData#xff0c;但是在执行的时候#xff0c;这个对象在父组件里也修改了#xff0c;可是就是死活没有触发。。。
观察报错
比…watch监听
执行的时候watch方法未执行。并没有报错
遇见的问题
子组件定义了props属性里有一个selectedData但是在执行的时候这个对象在父组件里也修改了可是就是死活没有触发。。。
观察报错
比较不好调查的就是这个并没有报错只是不执行也看不到真正传入到组件内部的对象值。 最后在各种调查之后发现了一个问题就是如下两种写法是有区别的传递到子组件的部分没有变化但是在父组件里的赋值行为不一样会导致监听失效
好用的
let expenditure res.data
let result {}
let y []
let series []
for (let i 0; i expenditure.length; i) {const item expenditure[i]y.push(item.key)series.push(item.value)
}
result.y y
result.series series
this.selectedData result不好用的
let expenditure res.data
let y []
let series []
for (let i 0; i expenditure.length; i) {const item expenditure[i]y.push(item.key)series.push(item.value)
}
this.selectedData.y y
this.selectedData.series series这里会发现只有当写了这个对象使用号被赋值的时候才能被watch监听到。那么可以理解成是地址的变化监听
问题解决
方案一
改成号赋值的才能让watch监听到变化。至于为啥呢因为默认的watch只会监听到对象的第一层上边不好用的写法第一层是没有改变的那自然不会走到watch里。所以会引出方案二深度监听
方案二
深度监听 就是在监听的时候增加一个深度监听的属性值给上true写法为 watch: {selectedData: {handler: function (newVal, oldVal) {// this.chart.clear()this.barOption.series[0].data newVal.seriesthis.barOption.yAxis.data newVal.ythis.chart.setOption(this.barOption, true)},deep: true}}这样就能完成对这个selectedData对象的深度监听了任何一个层级的值有改变都会触发了。
结语
先要了解watch是啥 watch的作用可以监控一个值的变换并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。简单来说就是vue是数据双向绑定当页面数据发生变化时我们通过watch可以拿到变化前和变化后的值之后做一系列操作。
基本语法
watch: {被监听的数据: {handler(数据改变后的值, 数据改变之前的值) {相关代码逻辑...}}
}在handler平级的位置可以写上其它属性immediatedeep immediate 如果设置为true那么就是页面刚加载的时候就会执行这样的话newValue是具体的值。但是oldValue是undefined。 deep 顾名思义就是深度监听了如果为true则对象里的所有内容都会被监听到
