2. Working with Data

Overview

In this chapter, you will expand on what you learned in the previous chapter by introducing more ways to control data inside Vue components. You will learn how to set up advanced watchers to observe data changes inside your components, and utilize Vue's powerful reactive data feature, computed data properties, to concisely output just the data you need in your template. You will also be able to utilize asynchronous methods to fetch data for your Vue components.

By the end of this chapter, you will be able to watch, manage, and manipulate data from various sources in your Vue.js components.

Introduction

In the previous chapter, you were introduced to the concepts of single-file components and the Vue API, which provides access to methods, directives, and data properties. Building on these foundations, we will be introducing computed properties, which, like data properties, are reactive in the UI but can perform powerful calculations, and their results are cacheable, increasing the performance of your project. When building e-commerce stores, you will usually want to calculate pricing and cart items reactively as users interact with your UI, which in the past would need to be achieved without a page reload using something like jQuery. Vue.js makes short work of these common frontend tasks by introducing computed properties that react immediately to frontend user input.

Let's begin by introducing reactive data that can be computed on the fly and understanding how to call and manipulate asynchronous data.

Computed Properties

Computed properties are a unique data type that will reactively update when source data used within the property is updated. They may look like a Vue method, but they are not. In Vue, we can track changes to a data property by defining them as a computed property, add custom logic within this property, and use it anywhere within the component to return a value. Computed properties are cached by Vue, making them more performant for returning data than a data prop or using a Vue method.

Instances where you may use a computed property include but are not limited to:

• Form validation:

  In this example, an error message will appear when the total data property is less than 1. The computed property for total will update every time a new piece of data is added to the items array:

  <template>
      <div>{{errorMessage}}</div>
  </template>
  <script>
      export default {
       ...

Computed Setters

In the last exercise, you saw how to write maintainable and declarative computed properties that are reusable and reactive and can be called anywhere within your component. In some real-world cases when a computed property is called, you may need to call an external API to correspond with that UI interaction or mutate data elsewhere in the project. The thing that performs this function is called a setter.

Computed setters are demonstrated in the following example:

data() {
  return {
    count: 0
  }
},
computed: {
    myComputedDataProp: {
      // getter
      get() {
        return this.count + 1
      },
      // setter
      set(val) {
        this.count = val - 1
 ...

Watchers

Vue watchers programmatically observe component data and run whenever a particular property changes. Watched data can contain two arguments: oldVal and newVal. This can help you when writing expressions to compare data before writing or binding new values. Watchers can observe objects as well as string, number, and array types. When observing objects, it will only trigger the handler if the whole object changes.

In Chapter 1, Starting Your First Vue Project, we introduced life cycle hooks that run at specific times during a component's lifespan. If the immediate key is set to true on a watcher, then when this component initializes it will run this watcher on creation. You can watch all keys inside of any given object by including the key and value deep: true (default is false) To clean up your watcher code, you can assign a handler argument to a defined Vue method, which is best practice for large projects.

Watchers complement the usage of computed data since they...

Deep Watching Concepts

When using Vue.js to watch a data property, you can purposefully observe keys inside an object for changes, rather than changes to the object itself. This is done by setting the optional deep property to true:

data() {
  return {
      organization: {
        name: 'ABC',
        employees: [
            'Jack', 'Jill'
        ]
      }
  }
},
watch: {
    organization: {
      handler: function(v) {
        this.sendIntercomData()
      },
      deep: true,
      immediate: true,
  &...

Methods versus Watchers versus Computed Props

In the Vue.js toolbox, we have access to methods, watchers, and computed properties. When should you use one or the other?

Methods are best used to react to an event occurring in the DOM, and in situations where you would need to call a function or perform a call instead of reference a value, for example, date.now().

In Vue, you would compose an action denoted by @click, and reference a method:

<template>
    <button @click="getDate">Click me</button>
</template>
<script>
export default {
    methods: {
        getDate() {
            alert(date.now())
        }
    }
}
</script>

Computed props are best used when reacting to data updates or for composing complicated expressions for us...

Async Methods and Data Fetching

Asynchronous functions in JavaScript are defined by the async function syntax and return an AsyncFunction object. These functions operate asynchronously via the event loop, using an implicit promise, which is an object that may return a result in the future. Vue.js uses this JavaScript behavior to allow you to declare asynchronous blocks of code inside methods by including the async keyword in front of a method. You can then chain then() and catch() functions or try the {} syntax inside these Vue methods and return the results.

Axios is a popular JavaScript library that allows you to make external requests for data using Node.js. It has wide browser support making it a versatile library when doing HTTP or API requests. We will be using this library in the next exercise.

Exercise 2.06: Using Asynchronous Methods to Retrieve Data from an API

In this exercise, you will asynchronously fetch data from an external API source and display it in the...

Summary

In this chapter, you were introduced to Vue.js computed and watch properties, which allow you to observe and control reactive data. You also saw how to use methods to asynchronously fetch data from an API using the axios library and how to flatten the data to be more usable within the Vue template using computed props. The differences between using methods and computed and watch properties were demonstrated by building search functionality using each method.

The next chapter will cover the Vue CLI and show you how to manage and debug your Vue.js applications that use these computed properties and events.