CODEWITHSUNDEEP
vue.js
Dedicated Managers
Dedicated Managers

Reputation: 343

Understanding Render Function - Is it actually called on each re-render?

I read that the render function gets called each time there's an update, but that doesn't appear to be the case. I created this codepen to show my findings. Is the render function only actually called once?

render: function (createElement)...

https://codepen.io/DedicatedManager/pen/wvvYaXO

Upvotes: 0

Views: 86

Answers (1)

yuriy636
yuriy636

Reputation: 11661

The render() function is executed with each change, you can see this by placing a simple console.log('render!') inside.

Why doesn't the rendered structure re-create the removed element? Well that's because of the internal Virtual DOM representation of the actual DOM that Vue uses. The Virtual DOM isn't aware that one element was removed because the "remove action" didn't pass through it.

As long as Virtual DOM is concerned, that element is still there, so it doesn't touch the actual DOM in order to re-create it. This is what Virtual DOM's "diff" is about.

Note that this concept isn't exclusive to Vue, React for example states this in its docs:

React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.

Upvotes: 2

Related Questions