父组件动态数据子组件props无法获取

Question

我的代码是这样的
父组件：

export default {
  data() {
    return {
      choice: []
    }
  }
  methods: {
    targetClass() {
      var item = {};
      ......
      this.choice.push(item); // 动态的向 choice 中追加新对象
    }
  }
}

子组件：

export default {
  props: {
    choice: {
      type: Array,
      default: () => {
        return [];
      }
    }
  }
  ......
}

经测试

<mip-form2 :choice="choice"></mip-form2>

子组件props无法获取到choice
但这么写就可以获取到

<mip-form2 :choice="Array.from(choice)"></mip-form2>

请问是为什么呢？还望指点，谢谢!

Answer 1

vue内部的数据监听其实并没有想象中那么健全，在层级比较深的数据中，监听失效导致页面没有渲染的情况其实是老生常谈了。
vue官方文档提供了一个专门的方法用来处理这个问题传送门，请在页面内搜索Vue.set。
但是我一般比较嫌弃这种写法，太麻烦了。
父组件试下这种改法

 targetClass() {
      var item = {};
      ......
      let choice = this.choice
      choice.push(item)
      this.choice = [].concat(choice)
    }

我这种写法是告诉vue整个choice都被我改朝换代了，你不要再监听里面有什么变换，直接给我全部重新渲染吧。其实相对的性能会差些。