vue子组件（图表）数据更新而视图不更新的问题解决（附深度监听与立即监听）_父组件更新数据,子组件更新了但是视图不变化-优快云博客

本文介绍了在Vue中，当子组件使用Echarts并由props传递数据时，遇到数据更新但视图未更新的问题。解决思路是通过设置watch监听props中的数据，并启用深度监听和立即监听。深度监听用于确保对象所有属性的变更都能触发更新，但可能带来性能开销。文章建议，若仅需监听对象中特定属性变化，应避免使用深度监听，并给出了字符串形式监听的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：子组件是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了，推荐如下方法（字符串形式监听）：


watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

也就是说，只有当我们需要监听一个对象的全部属性值的变化时，才用深度监听

而立即监听，就是要监听的对象值在绑定到vm实例上的瞬间就立即执行一次handler函数，普通监听只是当这个对象的值发生改变才触发handler函数