3

Optimizing your App and Using

Components to Display Data

In Chapter 2, Displaying, Looping, Searching, and Filtering Data, we got our Vue app

displaying our people directory, we can use this opportunity to optimize our code and
separate it out into components. This makes the code more manageable, easier to

understand, and makes it easier for other developers to work out the flow of data (or you,
when you come back and look at your code in a few months!).

This chapter is going to cover:

Optimizing our Vue.js code by reducing the repetition, and logically organizing

our code

How to create Vue components and use them with Vue

How to use props and slots with components

Utilizing events to transfer data between components

Optimizing the code

As we wrote the code while we were figuring out the problem, there comes a point when
you need to take a step back and look at your code to optimize it. This could include

reducing the number of variables and methods or creating methods, to reduce repeating
functionality. Our current Vue app looks like the following:

const app = new Vue({

el: '#app',

data: {

people: [...],

currency: '$',

filterField: '',

filterQuery: '',

filterUserState: ''