Vue2 05 计算属性

5.1 计算属性

其实计算属性不难理解：就是我们先计算，然后得到的结果，保存到 data 属性里面去。类似于缓存的操作。

只不过 Vue 的计算属性是在 内存中运行的！即虚拟 Dom

它的原理是：先创建一个跟这个方法名一样的变量名存储到 data 里面去。然后把这个方法的返回值赋值给这个变量。

注意事项

如果不改变方法的代码内容，它只会在最初调用一次，然后把返回值给那个变量，所以再次调用的时候其实一直调用的都是那个变量，而不是方法！值是不会发生改变的。
当你改动了方法的内容，甚至是方法里面的一个变量的值，它都会再次执行一次这个方法，然后改变那个同名变量的值。这个类似于 mybatis 的缓存机制。

{{方法()}} 的调用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    {{currentTime()}}
div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
    let vm = new Vue({
       el: "#app",
        // 如果 methods 和 computed 有重名的方法，那么 methods 优先级更高
       methods: {
           currentTime: function (){
               return new Date();
           }
       }
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在这里插入图片描述

computed 计算属性，你会发现格式完全就跟 method 一样

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    {{currentTime()}}<br>
    {{currentTime1}}
div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
    let vm = new Vue({
       el: "#app",
        // 如果 methods 和 computed 有重名的方法，那么 methods 优先级更高
       methods: {
           currentTime: function (){
               return new Date();
           }
       },
       computed: {
           currentTime1: function (){
               return new Date();
           }
       }

    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这里插入图片描述
从控制台我们可以看到，方法的话，你调用一次它就改变一次。但是属性这个东西，它不会改变。除非说你把这个页面刷新了。它才能改变。

如果我们在 currentTime1() 中添加一行 this.message，并且在控制台上改变 message 的值，那么计算属性就会重新计算！

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    {{currentTime()}}<br>
    {{currentTime1}}
div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
    let vm = new Vue({
       el: "#app",
       data: {
           message: "123"
       },
        // 如果 methods 和 computed 有重名的方法，那么 methods 优先级更高
       methods: {
           currentTime: function (){
               return new Date();
           }
       },
       computed: {
           currentTime1: function (){
               this.message;
               return new Date();
           }
       }

    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

methods 优先级比 computed 高

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app">
    {{currentTime()}}<br>
    {{currentTime}}
div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
    let vm = new Vue({
       el: "#app",
        // 如果 methods 和 computed 有重名的方法，那么 methods 优先级更高
       methods: {
           currentTime: function (){
               return new Date();
           }
       },
       computed: {
           currentTime: function (){
               return new Date();
           }
       }

    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在这里插入图片描述

结论：

调用方法时，每次都需要进行计算，既然有计算过程则必定会有额外的系统开销。那么如果这个结果不总是改变呢？？这个时候我们是否可以考虑把这个结果缓存起来。下次再用的时候调用这个结果就可以了。而计算属性就可以很方便的做到这一点！

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

相关阅读:
UA-DETRAC BITVehicle车辆检测数据集(含下载地址)
[Spring Boot 6]企业级开发
 Dash初探：如何将Label和Dropdown放在一行
 Pytorch总结九之深度学习计算（2）自定义层、读取和存储、GPU计算
 Rosalind Java|Longest Increasing Subsequence动态规划算法
 Java面试之数据类型
 linux内核分析：x86，BIOS到bootloader，内核初始化，syscall, 进程与线程
 在 Java 中对密码进行哈希处理
 服务端Skynet(五)——如何搭建一个实例
 复变函数知识结构
原文地址：https://blog.csdn.net/qq_52606908/article/details/126026872