More explicit explanation regarding view updates caused by array mutation

[kamerat]

In the list rendering docs, I find this mutation methods being a bit unclear:

Mutation Methods

Vue wraps an observed array's mutation methods so they will also trigger view updates. The wrapped methods are:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

You can open the console and play with the previous examples' items array by calling their mutation methods. For example: example1.items.push({ message: 'Baz' }).

Personally, I find this to be a bit oversimplified in comparison to what it actually means.

I have provided a Codepen example where you can see what this means in practice.

For me, this was somewhat unexpected. I did not until now know that by changing an array which is referenced in dom, Vue will recompute the whole component.*) (* Not necessarily sub-components *)

When I first spotted this in my own codebase, I did not understand how by changing an in data, the whole thing re-computes, for me, I thought logically only the array affected was the only thing to change, but it does make sense now after I have investigated it deeper. However, now that I came back to these docs to see for an explanation, this line is the only thing that is offered:

Vue wraps an observed array's mutation methods so they will also trigger view updates. The wrapped methods are:

Before my observation, reading the docs, I would understood the line as the following:

This is only applied to for-example an v-for: If you update the array used in a v-for, the page(view) will get re-rendered. This seems logical.

Now however, I know that any referenced array that gets mutated by array prototypes will make the page re-render.

My code-pen example above seems pretty obvious to me now, but if you instead of simply rendering the siblingArray, you use it as a prop to a child-component(dom reference), this stuff gets really confusing.

It might be only me being stupid here, but I do think a better more in-depth example/explanation could save more people like me for a headache.

[sarahdayan]

Hey @BlitZz96!

This has nothing to do with the mutation methods of an array. When you mutate any data property that's bound in the template, the view re-renders. You can check this fork of your example which mutates a foo (a number), causing the exact same thing.

The fact that methods are eager is explained in the docs:

However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again. [...] In comparison, a method invocation will always run the function whenever a re-render happens.

The important part is that Vue uses a virtual DOM to keep track of the changes it needs to make to the real DOM. The parts that don't change aren't updated, as you can see in the following GIF.

Does this help?

[kamerat]

Thank you for creating this example,, this makes sense to me now! 💯