手表没有按预期工作

Question

这里的问题很容易说明，我正在父组件上执行一个方法，它改变了我的对象products（也属于父data）的属性值，这工作正常.

但我将此对象作为道具传递给子组件并深入观察它alert('changed'); 永远不会执行：

Vue.component('child', {
	props: ['prods'],
  watch: {
  	prods: {
    	handler: function(new_val, old_val) {
      	alert('watched');
      },
      deep: true
    }
  }
})

new Vue({
  el: '#app',
  template: '<div>{{products[0].value}}<br><button v-on:click="incre">increment prod 0</button></div>',
  data: {
  	products: [
    	{id: 1, name: 'prod1', value: 20},
      {id: 2, name: 'prod2', value: 40},
    ],
  },
  methods: {
    incre: function() {
      this.products[0].value += 20;
    }
  }
})

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="app">
  <child v-bind:prods="products"></child>
</div>
https://jsfiddle.net/dmbgmxzh/6/

（更新）：
这有效：https://jsfiddle.net/dmbgmxzh/5/
这不是：https://jsfiddle.net/dmbgmxzh/6/
这很奇怪……

Answer 1

作为替代方案，您可以将产品作为道具传递给您的子组件，分别查看每个产品。像这样：

Vue.component('child', {
    props: ['product'],
    watch: {
        product: {
            handler: function (new_val, old_val) {
                alert('watched');
            },
            deep: true
        }
    }
})
new Vue({
    el: '#app',
    data: {
        products: [
            {
                id: 1,
                name: 'prod1',
                value: 20
            },
            {
                id: 2,
                name: 'prod2',
                value: 40
            },
    ],
    },
    methods: {
        incre: function () {
            this.products[0].value += 20;
        }
    }
})

<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<div id="app">
    <div>{{products[0].value}}<br><button v-on:click="incre">increment prod 0</button></div>
    <child :product="product" v-for="product in products"></child>
</div>

另见this post。