Vue 2 Data

Posted on  by admin

DOM Template Parsing Caveats

  • You’re browsing the documentation for v2.x and earlier.

Introduction to Vue.js data()

  • For v3.x, click here. Now it’s time to take a deep dive!
  • One of Vue’s most distinct features is the unobtrusive reactivity system.
  • Models are just plain JavaScript objects. When you modify them, the view updates.
  • It makes state management 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’s reactivity system.
  • When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty.
  • This is an ES5-only and un-shimmable feature, which is why Vue doesn’t support IE8 and below.
  • The getter/setters are invisible to the user, but under the hood they enable Vue 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 you may want to install vue-devtools for a more inspection-friendly interface.