control, the underlying binding source is updated a soon as the control loses focus.This is something you might want to prevent sometimes – a common scenario is a model dialog that provides a Cancel button to abort changes.

This is an ES5-only and un-shimmable feature, which is why doesn’t support IE8 and below.

The getter/setters are invisible to the user, but under the hood they enable to perform dependency-tracking and change-notification when properties are accessed or modified.

One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so make sure to use the instance method for more inspection-friendly output.

One of Vue.js’ most distinct features is the unobtrusive reactive system - models are just plain Java Script objects, modify it and the view updates.

It makes state management very simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas.

In this section, we are going to dig into some of the lower-level details of Vue.js’ reactivity system.

When you pass a plain Java Script object to a Vue instance as its option, will walk through all of its properties and convert them to getter/setters using Object.define Property.

Beatriz Costa posted a generic solution, but I found it a bit tedious to explicitly update every single control on my dialog.

As a result, I came up with a solution that recursively processes a visual tree from a given starting point and updates all controls that provide one or several bindings of your choice: Using the above method is quite simple: Just set a starting point (window, grid, whatever) along with an arbitrary number of dependency properties you’d like to have processed.

As an example: The snipped below commits all bound .

We’ve covered most of the basics - now it’s time to take a deep dive!