Content of property data updating
For every directive / data binding in the template, there will be a corresponding watcher object, which records any properties “touched” during its evaluation as dependencies.Later on when a dependency’s setter is called, it triggers the watcher to re-evaluate, and in turn causes its associated directive to perform DOM updates.
Since performs the getter/setter conversion process during instance initialization, a property must be present in the There are also a few Array-related caveats, which were discussed earlier in the list rendering section.Although provides the API to dynamically add reactive properties on the fly, it is recommended to declare all reactive properties upfront in the By default, performs DOM updates asynchronously.Whenever a data change is observed, Vue will open a queue and buffer all the data changes that happens in the same event loop.If the same watcher is triggered multiple times, it will be pushed into the queue only once.We’ve covered most of the basics - now it’s time to take a deep dive!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.
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.