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

How to create a Django project + connect to MySQL

Detailed explanation of the idea of installing mysql8.0.11 and changing the root password and connecting navicat for mysql

1.1. Download: Download the zip package from the ...

Detailed explanation of Vue's calculated properties

Summarize

How to create a Django project + connect to MySQL

js canvas to realize the Gobang game

HTML is something that web page creators must learn and master.

Detailed explanation of JavaScript program loop structure

Detailed explanation of how to use $props, $attrs and $listeners in Vue

Conventional JS processing functions for Vue Element front-end application development

Pagination Examples and Good Practices

Detailed explanation of FTP environment configuration solution (vsftpd)

Summary of situations where MySQL indexes will not be used

A brief discussion on MySQL count of rows

Recommend

This article will show you how JavaScript garbage collection works

Detailed explanation of zabbix executing scripts or instructions on remote hosts

Solve the problem that the commonly used Linux command "ll" is invalid or the command is not found

How to manually deploy war packages through tomcat9 on windows and linux

Install OpenSSL on Windows and use OpenSSL to generate public and private keys

Vue project realizes paging effect

js simulation to achieve the effect of enlarging the picture on the Jingdong details page

Nginx rewrite regular matching rewriting method example

Example of compiling LNMP in Docker container

Detailed explanation of the idea of installing mysql8.0.11 and changing the root password and connecting navicat for mysql

Detailed steps for installing ros2 in docker

Solution to define the minimum height of span has no effect

Detailed explanation of views in MySQL

img usemap attribute China map link

How to set static IP for Ubuntu 18.04 Server