Detailed explanation of Vue's calculated properties
|
1. What is a calculated attribute? In plain words, the calculated result is stored in the attribute, which can be imagined as a cache.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--Note that it is currentTime1(), the brackets are for method calls.-->
<p>currentTime1: {{currentTime1()}}</p>
<!--The currentTime1 here is not enclosed in brackets and is called through attributes-->
<p>currentTime2: {{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello vue!"
},
methods: {
currentTime1: function () {
// Return the current timestamp return Date.now();
}
},
computed: {
/*Note: There are calculated properties here: and the methods and computed method names cannot be the same.
Only methods will be called after the same name*/
currentTime2: function () {
this.message;
// Return the current timestamp return Date.now();
}
}
});
</script>
</body>
</html>
Running results:
Maybe at first glance there seems to be no difference. But if we think about it carefully, one is a method and the other is a property. As shown below:
<div id="app">
<!--Note that it is currentTime1(), the brackets are for method calls.-->
<p>currentTime1: {{currentTime1()}}</p>
<!--The currentTime1 here is not enclosed in brackets and is called through attributes-->
<p>currentTime2: {{currentTime2}}</p>
</div>
Key point : Attributes store values. They will change only when new values come in. Otherwise, it will be the same as caching. Let's look at this:
To explain: 1. From 1 and 2, we can see that one is a method and the other is a property. It is definitely not possible to call a property using a method. 2. In 1 and 3, we can see that the value of the method call is constantly changing, but the value of the attribute call is not changing. This is the same as the cache mechanism. 3. From 3, 4, and 5, we can see that once we change the value in the function, it is equivalent to changing the value in the cache, and then it will refresh the value. SummarizeWhen a method is called, calculations need to be performed each time. Since there is a calculation process, system overhead will inevitably be generated. What if the result does not change frequently? At this point, you can consider caching the result. This is easily done using computer properties. The main feature of computer properties is to cache calculation results that do not change frequently to save our system overhead. -----Do you understand, my friends? This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: In-depth understanding of Linux load balancing LVS
>>: Sharing tips on using scroll bars in HTML
Recommend
Practical MySQL + PostgreSQL batch insert update insertOrUpdate
Table of contents 1. Baidu Encyclopedia 1. MySQL ...
How to install JDK and set environment variables in Linux (this article is enough)
Table of contents 1. Check the number of Linux bi...
A brief analysis of Docker private image library and Alibaba Cloud object storage OSS
Docker private image library Docker private image...
Do you know how to use Vue to take screenshots of web pages?
Table of contents 1. Install html2Canvas 2. Intro...
Detailed tutorial on installing ElasticSearch 6.x in docker
First, pull the image (or just create a container...
Solution to VMware virtual machine no network
Table of contents 1. Problem Description 2. Probl...
How to change the color of the entire row (tr) when the mouse stops in HTML
Use pure CSS to change the background color of a ...
Front-end vue+express file upload and download example
Create a new server.js yarn init -y yarn add expr...
HTML discount price calculation implementation principle and script code
Copy code The code is as follows: <!DOCTYPE HT...
18 sets of exquisite Apple-style free icon materials to share
Apple Mug Icons and Extras HD StorageBox – add on...
JS implements layout conversion in animation
When writing animations with JS, layout conversio...
Demonstration of building ElasticSearch middleware and common interfaces under centos7 in Linux system
1. Introduction to Middleware 1. Basic concepts E...
Web Design: Web Music Implementation Techniques
<br />When inserting music into a web page, ...
How to implement second-level scheduled tasks with Linux Crontab Shell script
1. Write Shell script crontab.sh #!/bin/bash step...
Install and configure MySQL 5.7 under CentOS 7
This article tests the environment: CentOS 7 64-b...