Vue

by aurelienlt89

HTML

<div id="app">
  <p>
    changes: {{changes}}<br/>
    calls: {{calls}}
  </p>
  <ul>
    <li v-for="(item, i) in list" :key="i">
      {{item.a}} 
      <button @click="incrItem(i)">
        Incr
      </button>
      <button @click="removeItem(i)">
        Del
      </button>
    </li>
    <li>
      <button @click="addItem()">
        Add
      </button>
    </li>
  </ul>
</div>

Vue

new Vue({
  el: "#app",
  data () {
    return {
      list: [{a: 0}],
      calls: 0,
      changes: 0,
    }
  },
  computed: {
  	copy () { return this.list.slice() },
  },
  watch: {
  	copy (a, b) {
    	this.calls ++
    	if (a.length !== b.length) return this.onChange()
      for (let i=0; i<a.length; i++) {
      	if (a[i] !== b[i]) return this.onChange()
      }
    }
  },
  methods: {
  	onChange () {
    	console.log('change')
      this.changes ++
    },
    addItem () { this.list.push({a: 0}) },
    incrItem (i) { this.list[i].a ++ },
    removeItem(i) { this.list.splice(i, 1) }
  }
})