[JavaScript知识库]vue子组件（图表）数据更新而视图不更新的问题解决（附深度监听与立即监听）

背景：子组件是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函数