Detailed explanation of calculated properties, monitoring properties and life cycle in Vue.js

Preface
Computed properties

Introduction to computed properties
Getting Started Case
Statistical price case
Getter and setter methods
Computed property cache

Monitoring properties

Overview
Code
Summarize

Vue Lifecycle

Initialization phase
Update Phase
Death stage

Summarize

Preface

In this chapter, let's talk about two very important calculated properties, monitoring properties, and life cycle in Vue. Let's get straight to the point without any nonsense.

Computed properties

Introduction to computed properties

In the template, you can directly display some data in data through interpolation syntax. In some cases, we need to transform or calculate the data before displaying it. We can use the computed option to calculate it. At this time, some friends may ask, why do I need a calculated attribute when I can just define the function and call it directly? This question will be explained below. Let’s first take a look at how to use calculated properties!

Getting Started Case

need

Concatenate a person's first and last name

Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- Original splicing method-->
			<p>{{fastName}} {{lastName}}</p>
			<!-- Calculation in template syntax -->
			<p>{{fastName + " " + lastName}}</p>
			<!-- Call function calculation-->
			<p v-text="fullName2()"></p>
			<!-- Calculated using computed properties -->
			<p>{{fullName1}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				fastName: "Tracy",
				lastName: "McGrady"
			},
			computed: {
				fullName1: function(){
					return this.fastName + " " + this.lastName
				}
			},
			methods: {
				fullName2: function(){
					return this.fastName + " " + this.lastName
				}
			}
			
		})
	</script>
</html>

Effect

Statistical price case

Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{totalPrice}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				books: [
					{id: 100,name: 'The Art of Unix Programming',price: 119},
					{id: 200,name: 'Java Programming Ideas',price: 105},
					{id: 300,name: 'High Concurrency Programming',price: 98},
					{id: 400,name: 'Spring5',price: 99},
				]
			},
			computed: {
				totalPrice: function(){
					let result = 0;
					// Ordinary loop /* for(let i = 0;i < this.bookes.length;i++){
						result += this.bookes[i].price;
					} */
					
					// Enhanced for loop, i is the index /* for(let i in this.bookes){
						result += this.bookes[i].price;
					} */
					// ES6 adds a for loop to directly get the object for(let book of this.bookes){
						result += book.price
					}
					return result;
				}
			}
		})
	</script>
</html>

Getter and setter methods

introduce

The complete way to write a calculated property actually includes getter and setter methods. Declare a fullName object. Because we usually only get the value, we will omit it and write it as in the above case. We will call the get method when getting data and call the set method when setting data.

Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{fullName}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				firstName: "Tracy",
				lastName: "McGrady"
			},
			// Calculated properties computed: {
				// Calculate the object fullName:{
					//Set data set: function(){
						console.log('---');
					},
					// Get data get: function(){
						return this.firstName + " " + this.lastName;
					}
				}
			}
		})
	</script>
</html>

Computed property cache

Here we will answer the question about the difference between methods and computed. The following code uses interpolation syntax, methods, and computed properties to render data.

Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- Original method, which is cumbersome when dealing with data calculations and is not recommended. -->
			<p>Name: {{name}} Job: {{job}}</p>
			<!-- Methods, call the function once each time data is obtained -->
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<p>{{getInfo1()}}</p>
			<!-- computed method, when the data has not changed, it is called only once and the data will be cached-->
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
			<p>{{getInfo2}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				name: "Maddie",
				job: "NBA star"
			},
			methods: {
				getInfo1: function(){
					console.log("methods");
					return "Name: " + this.name + "Job: " + this.job;
				}
			},
			computed: {
				getInfo2: function(){
					console.log("computed");
					return "Name: " + this.name + "Job: " + this.job;
				}
			}
		})
	</script>
</html>

Diagram

in conclusion

Both methods and computed seem to be able to achieve our functions
The calculated property will be cached. If used multiple times, the calculated property will only be called once.

Monitoring properties

Overview

We can use watch to monitor the changes of specified data, and then call the corresponding logic to process the data

Code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="firstName" />
			<input type="text" v-model="lastName" />
			<input type="text" v-model="fullName" />
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app = new Vue({
			el: "#app",
			data: {
				firstName: "A",
				lastName: "B",
				fullName: "AB"
			},
			// Monitoring properties watch: {
				firstName(value) {
					this.fullName = value + this.lastName
				},
				lastName(value) {
					this.fullName = this.firstName + value
				}
			}
		})
	</script>
</html>

Summarize

The monitoring property requires much more code than the calculated property. The calculated property only needs to calculate the data, while the monitoring property needs to monitor the changes of each data.

Vue Lifecycle

The following diagram shows the life cycle of an instance. You don’t need to understand everything right away, but as you continue to learn and use it, its reference value will become higher and higher.

The life cycle is roughly divided into three stages: initialization stage, update stage, and death stage

Initialization phase

This phase is called when a new Vue instance is created and is only called once.

beforeCreate: Call the function before creating

created: Call the function after creation

Then mount and render the template

beforeMount: Operation before mounting, to replace the label selected by el

Mounted: The mounting is complete and the data is displayed on the browser

Update Phase

This phase is entered when the data changes, and the

beforeUpdate: Triggered when data is modified

Updated: Called after the virtual DOM is modified, that is, after the data is modified

Death stage

The death phase is also called only once

beforeDestroy: before destruction

destroyed: destroyed

The sample code is as follows

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<p v-show="isShow">{{message}}</p>
			<p>{{isShow}}</p>
			<button type="button" @click="destroyVM">Cancel bulling bulling</button>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app = new Vue({
			el: "#app",
			data: {
				message: "looming",
				isShow: true
			},
			
			beforeCreate() {
				console.log("beforeCreate");
			},
			
			created() {
				console.log("create");
			},
			
			beforeMount() {
				console.log("beforeMount");
			},
			
			mounted() {
				console.log("mounted");
				// Create a timer this.intervald = setInterval(()=>{
					console.log("-------"+this.isShow);
					this.isShow = !this.isShow;
				},1000)
			},
			
			beforeUpdate() {
				console.log("beforeUpdate");
			},
			
			updated() {
				console.log("updated");
			},
			
			beforeDestroy() {
				console.log("beforeDestroy");
                // Clear the timer clearInterval(this.intervald)
			},
			
			destroyed() {
				console.log("destroyed");
			},
			
			methods: {
				// Kill the vm
				destroyVM() {
					//Call the destruction function this.$destroy()
				}
			}
		})
	</script>
</html>

As shown in the figure below, when the page is refreshed, beforeCreate, created, beforeMount, and mounted are called in sequence. When the timer runs to modify the isShow data, beforeUpdate and updated are called multiple times. Clicking the button calls the logout function, and beforeDestroy and destroyed are called.

In general, created, mounted, and beforeDestroy are more commonly used.

created, mounted: send ajax requests, start timers and other asynchronous tasks
beforeDestroy: do finishing work, such as clearing the timer

Summarize

This concludes this article about calculated properties, monitored properties, and lifecycles in Vue.js. For more information about calculated properties, monitored properties, and lifecycles in Vue, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: