computed property of array is difficult to trigger

[elijahiuu]

Version

2.5.7

Reproduction link

https://jsfiddle.net/elijahww/oct9s9pa/

Steps to reproduce

I was having difficulties in my app getting a "computed" to notice that my array was altered (deeply). The array was modified via arr.push({val:'hello'}). That part gets noticed. But changes to the data I push does not get detected, arr[1].val = 'bye' does not get detected... unless:

I played around with different ways to tell Vue what to look for in 'computed' and I did find a condition that solves my scenario, but a) I don't understand why it works, b) it's not straight forward.

Basically, I iterate through the array in computed function and touch every getter. That seems to satisfy the Dep tracking logic. Notice, however, in my example that array starts off with 0 elements, and I am looping on a zero element array, and yet it works. Why?
If you remove line 7: (this.arr[i].val;), my change detection no longer works. Who knows what V8 does to the rest of the for-loop. Maybe it yanks it out at runtime?

What I would like is an API to add something to the computed Dep tracker. In my example, when I add a new element to array, I could call something like this.$updateComputed('myComputedName').

var track = 0; // track iGotEvaluated calls

Vue.component('comp', {
	computed: {
  	iGotEvaluated: function() {
			for (var i = 0; i < this.arr.length; i  ) {
				this.arr[i].val;
      }
      return   track;
    }
  },
	template: `
  	<div>
    		<div>computed: #{{ iGotEvaluated }}</div>
        
       	<div v-for="n in arr">
          	<input v-model="n.val"/>
       	</div>
       	<button v-on:click="add()">Add</button>
    </div>`,
  data: function() {
	  return {
      arr: []
  	}
  },
  methods: {
  	add: function() {
    	 this.arr.push({val: 'edit me'});
    }
  }
})

new Vue({el: '#app'})

What is expected?

A more straight forward way to determine when change in deep array will trigger computed

What is actually happening?

When dealing with deep array object it is not clear when the change detection will take place

[dodas]

When you want your computed recomputed, variable/property you are referencing must be changed. Empty for loop like for (var i = 0; i < this.arr.length; i ) {} does touch only arr.length, which does not change when you are changing value of arr[1].val.

Objects are not watched deeply so property is not recomputed on every modification of object.
If your computed does not depend directly on certain property, use watch with deep: true and method.

[posva]

pretty much what @dodas said. Use watch with deep: true
Computed properties are not meant for side effects, they're meant to return new values and that's why they only get recomputed when any of the dependencies change. Therefore, if you do not need arr[i].val inside of the computed property, Vue shouldn't recompute that property

[yyx990803]

There's no deep for computed. That's a watcher only option.

Regarding your question: you should not care whether a computed gets evaluated or not, unless for performance reasons. The point of a computed property is that it returns a value, and it only gets recomputed if that value depends on some other reactive state that has changed. As long as the returned value is up-to-date, it should evaluate as little as possible. Wanting to force recompute a computed property is a sign that you are using it incorrectly.

[elijahiuu]

I ended up using the deep watch. I started off with computed. My actual component logic (not the jsFiddle) was this:

computed: {
  isValid: function() {
     // perform all the validations on a fairly flat object with one exception being that array
    return true; // or false
  }
},
watch: {
  isValid: function(val) {
   this.$emit('input', val);
 }
}

this was supposed to $emit a v-model to indicate that my component passes business validation or not.

Yes. it's all implementable with a watch-only approach.

Oh, and, brilliant work on this framework btw.