Reactivity

A key feature of Vue's design is its reactivity system. When you modify data, the view automatically updates to reflect that change.

For example, if we create a function that pushes another item to our array of grocery items after the page has already been rendered, the page will automatically re-render to reflect that change:

setTimeout(function() {
  app.groceries.push('Apples');
}, 2000);

Two seconds after the initial rendering, we see this:

<p id="app">
  <h3>Grocery list</h3>
  <ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Apples</li>
  </ul>
</p>