子组件computed属性改变视图不改变

Question

父组件：

<parent :date_schedule="date_schedule"></parent>

子组件：

props: {
    date_schedule:{
        type:Array,
        default: []
    },
  },
  data () {
    return {
      ...
    }
  },
  watch: {
    date_schedule: {
        handler(newVal,oldVal) {
            console.log(newVal)
            console.log(oldVal)
            //console.log('date_schedule:update');
            //this.update_calendar_schedule();
        },
        deep: true
    },
    table_data: {
        handler(value) {
            //console.log('table_data:update');
            //this.update_calendar_schedule();
        },
        deep: true
    },
  },
  computed: {
    table_data:{
        get: function() {
            return this.date_schedule;
        },
        set: function(value) {
            console.log(value);
        }
    },
  },
 
  

子组件中使用table_data来渲染出一个table。
当父组件的date_schedule修改时，子组件的date_schedule和table_data都有变化，
但是子组件中的table视图却不随变化而更新，显示的永远是还是上一次table_data数据。
我知道是数据检测变化的问题，但始终找不出是哪里的问题，请大家帮忙看一下~谢谢了

Answer 1

子组件：

props: {
    date_schedule: {
        type: Array,
        default: []
    }
},
data() {
    return {
        table_data: this.date_schedule
    }
},
watch: {
    date_schedule(newValue) {
        this.table_data = newValue
    }
}

Answer 2

可以试试改变table_data的引用，重新赋值一个对象给它，这或许会触发computed的重新计算

Answer 3

props是单向数据流，不能直接修改它的值，参考props。或者你也可以看我总结的笔记的示例demo。

Answer 4

在子组件里的data初始化table_data，watch从父组件中传过来的值data_schedule