背景:子组件是echarts的柱状图,数据datas以数组形式由props传递进来
思路:通过watch监听datas的改变,记得加上立即监听和深度监听
watch: {
datas: {
handler(val) {
this.$nextTick(() => {
this.initChart();
});
},
immediate: true,
deep: true
}
},
// 也可能导致内存溢出,消耗性能,如果发现datas改变时卡顿最好换一种方法去处理
关于深度监听,我参考其他博主的博客,结合个人理解来看,是因为vue的响应式原理导致的普通监听无法检测到对象的某个属性直接发生的改变,而只能监听到对某一个obj赋值(改变对象对应的堆中的指针),一般情况都建议加上深度监听。
由于我觉得该博主写的很不错,以下引用http://t.csdn.cn/vp8wW
‘deep
的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj
里面任何一个属性都会触发这个监听器里的 handler。’
如果只需要监听对象中某一个属性值的变化,就不要使用deep:true了,推荐如下方法(字符串形式监听)