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
VMware configuration VMnet8 network method steps
Table of contents 1. Introduction 2. Configuratio...
Tips for using the docker inspect command
Description and Introduction Docker inspect is a ...
Example of implementing colored progress bar animation using CSS3
Brief Tutorial This is a CSS3 color progress bar ...
MySQL controls the number of attempts to enter incorrect passwords
1. How to monitor MySQL deadlocks in production e...
Detailed explanation of how to synchronize data from MySQL to Elasticsearch
Table of contents 1. Synchronization Principle 2....
Detailed explanation of MySQL from getting started to giving up - installation
What you will learn 1. Software installation and ...
Analysis and solution of a.getAttribute(href,2) problem in IE6/7
Brief description <br />In IE6 and 7, in a ...
MySQL tutorial on how to deploy multiple instances on a single machine using mysqld_multi
Table of contents 1. MySQL compilation and instal...
Detailed explanation of the use of default in MySQL
NULL and NOT NULL modifiers, DEFAULT modifier, AU...
Nginx anti-crawler strategy to prevent UA from crawling websites
Added anti-crawler policy file: vim /usr/www/serv...
Detailed explanation of the difference between a href=# and a href=javascript:void(0)
a href="#"> After clicking the link, ...
Docker compose custom network to achieve fixed container IP address
Due to the default bridge network, the IP address...
uniapp Sample code for implementing global sharing of WeChat mini-programs
Table of contents Create a global shared content ...
vue perfectly realizes el-table column width adaptation
Table of contents background Technical Solution S...
22 Vue optimization tips (project practical)
Table of contents Code Optimization Using key in ...