vue watch 监听不到数据变化

原创已于 2022-11-21 12:00:27 修改 · 3.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

收录于

于 2022-11-21 11:59:45 首次发布

vue2 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个Vue中常见的问题——监听父组件传递过来的数组变化。通过一个具体示例，展示了如何使用watch监听数组的变化，并解释了如何启用deep属性来实现深层次的监听。

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'));
    	}
    }
    ...
}

解决方法

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

  watch: {
    reportTypeList: {
      handler(newData){
        this.allData = _.clone(newData);
        this.allData.sort(util.compare('report_type', 'ascending'));
      },
      immediate: true,
      deep: true
    }
  },