vue-计算属性原理

learning › vue

这两天明显感觉到了春天来了,每天的太阳都是那么温暖。但是却无法接近，现在看待事务变得总是那么悲观了

之所以使用计算属性时，可以不加括号，是因为它本身就不是一个函数，而是使用了简写的形式。计算属性作为一个对象，实现了get和set方法，不过set方法一般不会使用，所以才有了简写形式

举例：

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 这里调用的不是一个函数,而是作为computed的一个属性 -->
        <h2>{{fullname}}</h2>
    </div>
    <script src="../../../vue.js" charset="utf-8"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                firstname: 'lanzhan',
                lastname: 'weiwuxian'
            },
            // 使用计算属性
            computed: {
                // fullname其实不是一个函数,而是作为一个对象,包含了set和get方法
                fullname: {
                    // set函数可以对其进行赋值,可以接受参数
                    // set方法一般不会使用,为了安全,所以fullname这个对象只有一个get方法
                    // 所以一般不写set方法,只有get方法,就对其进行了简写
                    set: function(newname){
                        const name = newname.split(' ');
                        this.firstname = name[0];
                        this.lastname= name[1];
                    },
                    // get方法用来返回值,一般使用get方法
                    get: function(){
                        return this.firstname + ' ' + this.lastname
                    }
                }
            }

            // 简写一: 省略set方法
            // computed: {
            //     fullname: {
            //         get: function(){
            //             return this.firstname + ' ' + this.lastname
            //         }
            //     }
            // },

            // 简写二: 再次简化 ,这也是我们最常写的方法
            // computed: {
            //     fullname: function(){
            //         return this.firstname + ' ' + this.lastname
            //     }
            // }
        })
    </script>
</body>
</html>