1

After much trials and reading on vue.js, I tackled my first app with components, etc. I found tricky to associate external object to data and figure out in which conditions Vue binds those external entities with the data/computed/watch/props attributes. I ran into some strange surprises with my components and I decided to explore some cases with codepen. My main concern is for example when you have a: b, in the data section and b is an external entity like a value, an array, an object, simple or deeply nested, how does it work with binding to the DOM in {{a}} and v-bind mainly.

To my surprise during those tests, was first to see {{b}} was reactive too. Why not, because b is declared in the data section. Things become strange when I tried {{c}} where c is an external entity not present anywhere in the Vue object. DOM was reactive to c too!

More strangely, I observed this phenomenon only in HTML/template part: watch only reacts on a and computed on a and b but not on c.

I also observed props seem to be reactive on a, b, and c.

All these tests are combined in a codepen where I set my external data moving by a setInterval. It's here: https://codepen.io/Djee/pen/qwXjRw

More broadly, I found no article or material addressing those aspects I first mention and specifically not this kind of auto-binding of objects directly bound in handlebars and live without being mentioned anywhere in the Vue object. Did I miss something? Is there some material exploring/explaining those aspects? Thanks for the help.

PS: in my project, I found using this.$watch(cb, {deep: true}); in the created() function is more powerful than watch. Another oddity for me, not included in this codepen, as of writing. Maybe I'll add it.

1 Answer 1

0

I think this is the key part of your question:

how does it work with binding to the DOM

The way you've written your codepen makes this appear like a straightforward question but there are several stages involved here that aren't immediately obvious.

  1. When you create the Vue instance the contents of your container element are used as a template. The DOM nodes themselves are then thrown away. This is important to understand as it differs significantly from how many other frameworks work. You aren't binding anything to those DOM nodes, they are just the template.
  2. That template is then compiled down into a render function. It is this render function that Vue will call to render the component.
  3. During rendering the render function returns virtual DOM (VDOM) nodes. Some of these nodes will correspond to HTML elements while others will refer to child components. The child component will be rendered in turn and eventually, once all components are rendered, everything reduces down to just HTML VDOM nodes.
  4. During the initial render these HTML VDOM nodes translate fairly directly into the HTML DOM. During updates (re-rendering) the new VDOM is compared to the previous VDOM and the actual DOM is only updated where changes have occurred.

From a reactivity perspective, render is a lot like a computed property. Any reactive data that is touched by the render function will be tracked. If that data subsequently changes it'll trigger a re-render of that component.

Any data that is not reactive will not be tracked. Updating that data will not cause a re-render, won't update computed properties and won't trigger any watch listeners.

In your example you've got one big template that will be compiled down to a single render function. If any of the reactive data changes it will trigger a re-render. That will run the whole render function and create a new VDOM tree. Data is accessed as required and will include both reactive and non-reactive data.

However, if you just change non-reactive data then there is nothing to trigger the re-render. In that case the render function won't be called and no DOM changes will occur.

Don't let the name v-bind confuse you. That just means 'this is a JavaScript expression' and isn't necessarily anything to do with creating a dependency. Dependencies are tracked at the level of the render function and there is no special handling to link dependencies directly to their DOM nodes. If any dependency changes then the whole render function will be re-run. This isn't as expensive as it sounds as the render function is only creating a VDOM. The expensive process of updating the DOM will use VDOM diffing/updating to make only the minimal changes that are required to update the DOM nodes that need it. The direct link between the data and the DOM that appears to exist in the template is not retained once the template is complied.

Computed properties work in a similar way. Their values are cached and only recalculated when a reactive dependency is updated. If they have a non-reactive dependency then that won't invalidate the cached value. However, if a reactive dependency invalidates the cached value then any changed non-reactive dependencies will still get pulled in when the new value is calculated.

The easiest way to figure out whether an object/array is reactive is to log it out to the console. When Vue makes an object reactive it replaces all of its properties with getters and setters and that changes how it appears in the console.

Generally Vue will only make an object reactive once, when it's first added to the data. Only properties that exist at that point will have getters and setters created, leading to the common problem that any new properties added later will not be reactive. That is what Vue.set and vm.$set are for:

https://v2.vuejs.org/v2/api/#vm-set

Vue recently added Vue.observable, which allows objects to be made reactive without going through data:

https://v2.vuejs.org/v2/api/#Vue-observable

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.