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:

insert image description here

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:

insert image description here

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.

Summarize

When 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:

Vue uses calculated properties to complete the production of dynamic sliders
Introduction to Computed Properties in Vue
Vue computed properties
Summary of knowledge points on using calculated properties in Vue

<<: In-depth understanding of Linux load balancing LVS

>>: Sharing tips on using scroll bars in HTML

Interview questions: The difference between the Holy Grail layout and the double-wing layout

Detailed explanation of Vue's calculated properties

Summarize

Interview questions: The difference between the Holy Grail layout and the double-wing layout

Docker MQTT installation and use tutorial

Detailed explanation of the mysqlslap command and syntax for the built-in stress test in MySQL 5.7

Advantages and disadvantages of MySQL indexes and guidelines for creating indexes

2 reasons why html-css tag style setting does not work

Flex layout realizes left text overflow and omits right text adaptation

Implementing a simple timer based on Vue method

Detailed explanation of the conflict between flex layout and position:absolute/fixed

Solve the problem of Docker starting Elasticsearch7.x and reporting an error

Recommended tips for web front-end engineers

Recommend

How to use dl(dt,dd), ul(li), ol(li) in HTML

Detailed explanation of slots in Vue

The iframe refresh method is more convenient

How to use cc.follow for camera tracking in CocosCreator

Docker image loading principle

Deploy Confluence with Docker

Linux firewall iptables detailed introduction, configuration method and case

vue_drf implements SMS verification code

Common operations of web front-end (including JS/HTML/CSS and other aspects of knowledge)

Analysis of Difficulties in Hot Standby of MySQL Database

JavaScript modularity explained

React uses emotion to write CSS code

MySQL query optimization: a table optimization solution for 1 million data

Solve the problem that the IP address obtained using nginx is 127.0.0.1

js to realize simple shopping cart function