Vue.js 2 Design Patterns and Best Practices

Understanding reactivity

We've discussed reactivity and how it can be used in the previous chapters, but it's important to reconsider. When we're creating reactive data objects within Vue, it takes each property and adds appropriate getters/setters using Object.defineProperty. This allows Vue to handle changes to the object and notifies watchers, subsequently updating the component https://vuejs.org/v2/guide/reactivity.html. This can be visualized like so:

Visualizing Reactivity

This means that any property defined in the data option is automatically reactive. Here's an example:

export default {  data() {    return {      name: 'Vue.js'    }  }}

The