This section discusses several kinds of asynchronous function calls in client-side programming. We define these asynchronous functions in the program, but our code does not call them directly. Instead, we registered these asynchronous functions to handle some future events, e.g. user interface events, timers and Vue component life cycle.
In a web app, a common way to trigger an action is mouse click. When a user clicks on an HTML element, the element is said to fire a click event. We can use the Vue directive v-on:click (or shorthand notation @click) to define an event handler. Look at the code snippet from the example p307.html.
The event handler can be a JavaScript statement, (e.g. count++) or the number of a method of the view model.
<div id="app">
<p>Click count: {{ count }}</p>
<button class='btn btn-primary' v-on:click='count++'>Add 1</button>
<button class='btn btn-success' @click='this.count--'>Minus 1</button>
<button class='btn btn-warning' @click='reset'>Reset to 0</button>
</div>
<script>
const opts = {
data() {
return { count: 0 }
},
methods: {
reset(event) {
this.count = 0;
// check the event object in browser console ...
}
// another method omitted
}
};
const vm = Vue.createApp(opts).mount('#app');
Vue component methods are defined under the methods property of the options object. Inside the method body, you can use this to refer to data properties. Examine the view model vm in browser’s developer tools to check that both data properties and methods are properties of vm.
Vue component method definition cannot use arrow function, because it requires
this.
JavaScript timers allow us to schedule a function to run after a certain time period. There are two types of timers. One-time timer will run a given function once after a fixed period, and periodic timer will run a given function repeatedly with an interval of a fixed period. (online reference)
// set a timer of 5s. show a message when timer expires
let timerId = setTimeout(
()=>{ console.log('Time is up') },
5000
);
// run this to cancel the timer because it expires
clearTimeout(timerId);
// set an interval timer of 2s. show a message every 2s
let timerId = setInterval(
()=>{ console.log('2s passed') },
2000
);
// run this to cancel the timer
clearInterval(timerId);
Study the example p307-timer.html for another example of timers.
Another source of asynchronous function calls in Vue is lifecycle hooks.
Examples we studied up to this moment only apply a single component instance, which is the root component mounted to the document tree. (In later sections of this chapter, we’ll learn how to define new components and use third-party components.) Each component instance will go through several moments in its lifecycle. These include created, mounted, updated and unmounted. By defining a lifecycle hook in the options object, we can instruct Vue what to do in different moments in the lifecycle.
Click here to see the Vue component lifecycle diagram.
For example, we can define a created hook to initialize a component after its data properties are created, but before its template is processed and mounted to the document tree. For example, you can load data from a server to populate the initial view of a component.
The following code snippet comes from example p307-lifecycle.html.
<div id="app">
<p>This component is created {{ count }} seconds ago.</p>
</div>
<script>
const opts = {
data() {
return { count: 0 };
},
created() {
setInterval( ()=>{this.count++}, 1000 );
},
updated() {
console.log("component updated...");
}
}
</script>