Data-driven views in Vue are achieved with the help of reactivity.

To grasp the concept better, let's look at an example code in which there is no reactivity. We will use an example that is very similar to the one we had in the previous chapter, when we were comparing Vue and vanilla JS. In the original example, using JavaScript, we created an unordered list and three list items inside of it. The values of the three list items were added from an array we declared, and the unordered list was populated with these list items using a for loop.

This time, we will do something slightly different. To see the example as a pen, visit https://codepen.io/AjdinImsirovic/pen/JZOZdR...

The usefulness of reactivity in Vue can be described in terms of the difference between computed properties and methods.

As we mentioned earlier, a Vue instance can have either computed properties, methods, or both computed properties and methods. So, what is the difference between the two?

Methods are simply run every time they are called. On the other hand, computed properties are cached, meaning they are only run when the underlying data model changes. This is often described in terms of computed property dependencies. Also, methods can have parameters, whereas computed properties cannot.

Consider this simple Vue app, available as a pen at this link...

To begin, let's look at how to make a component in Vue. First, we specify the component, like this:

Vue.component('custom-article', {
  template: `
    <article>
      Our own custom article component!<span></span>
    </article>`
})
new Vue({
    el: '#app'
})

A component is a block of code that we give a custom name. This custom name can be anything we come up with, and it's a single label for that entire block of code in the form of a custom HTML tag. In the previous example, we grouped the article and span tags and gave that custom tag the name of custom-article. 

The code for this component is available as a Codepen at https://codepen.io/AjdinImsirovic/pen/xzpOaJ.

Now, to create an instance of our component...

Every component in Vue has a watcher. 

To understand how this works, let's begin with an earlier example from this chapter. The example is from the Computed properties section, at this link: https://codepen.io/AjdinImsirovic/pen/qKVyry. That is our starting code. As we know from the previous section, we have two input fields here and we are printing out the values entered into these input fields in some span tags under the form.

Let's extend our example. The initial code is the same; we will only be adding a watcher to it. The updated code can be found at this Codepen URL: https://codepen.io/AjdinImsirovic/pen/jprwKe.

As can be observed, the only update we made to the original pen is the addition of the watchers option, as follows:

  watch: {
    ownerName(previousValue,currentValue) {
      console.log(`The value in the first input has changed...

Life cycle hooks are methods that let us alter the behavior of components at various stages of their life cycle. 

It's just the natural progression of the life of a component.

Thus, we can say that lifecycle hooks are points along this journey that each component needs to go through. At these specific points in a component's life, we can use these methods to alter a component's behavior.

The Vue team has chosen very descriptive names for these lifecycle methods. What follows is the list of lifecycle hooks organized in the order of the natural progression of a component's life:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated...

In this chapter, we looked at some basic concepts in Vue. We described why these concepts are important and how they can be used. We also looked at several simple examples of using these concepts in practice.

We learned about data-driven views in Vue and reactivity as a way to keep track of the changes to the data model. We looked at using computed properties and methods, directives, and their modifiers. We have seen some practical examples of components, templates, and props, as well as different approaches to building component templates in Vue.

We learned how to prototype websites using Vue components and directives, and we wrapped up the chapter with a look at watchers and lifecycle hooks as a powerful way to alter the behavior of components at any point of their lifecycle.

In the next chapter, we will further delve into reactive programming in Vue with a focus on...