vue watch 监听不到数据变化

---

场景描述

对父组件传进来的数组进行监听，发现数组的数值改变了，但是watch却没有监听到，代码如下：

export default {
	...
	props: {
      reportTypeList: {
      	type: Array,
      	default() {
          return []
      	}
      }
    },
    watch: {
    	reportTypeList(newValue){
    		// 对新数据做处理
    		this.allData = _.clone(newData);
    		this.allData.sort(util.compare('report_type', 'ascending'));
    	}
    }
    ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

解决方法

开启 deep 属性，对数组进行 深层watch，代码如下：

  watch: {
    reportTypeList: {
      handler(newData){
        this.allData = _.clone(newData);
        this.allData.sort(util.compare('report_type', 'ascending'));
      },
      immediate: true,
      deep: true
    }
  },
1
2
3
4
5
6
7
8
9
10

---