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

在这里插入图片描述

结论：

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

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

相关阅读:
python 实现单链表
 drools中Fact的equality modes
分布式ID性能评测：CosId VS 美团 Leaf
常见的开源规则引擎简介
 评测回顾 | 天空卫士以人为本的数据防泄露系统
 Map集合之HashMap细说
 AtCoder Beginner Contest 263 部分题解
 有属性的自定义注解，如何获取到post请求中RequestBody中对象的一个属性值？
第二十一节——路由初识
 事务提交之后再执行某些操作 → 你有哪些实现方式？
原文地址：https://blog.csdn.net/qq_52606908/article/details/126026872