计算属性

前言

这篇文章介绍vue组件基础中的计算属性，文章持续输出中！
废话不多说，直接上刺刀！！

1. 什么是计算属性

计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，

供组件渲染 DOM 时使用。

2. 如何声明计算属性

计算属性需要以 function 函数的形式声明到组件的 computed 选项中，示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值！

3. 计算属性的使用注意点

① 计算属性必须定义在 computed 节点中

② 计算属性必须是一个 function 函数

③ 计算属性必须有返回值

④ 计算属性必须当做普通属性使用

4. 计算属性 vs 方法

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。因此

计算属性的性能更好。使用方法，在模板中使用多次会计算多次，而计算属性只计算一次，后面调用缓存。

5. 计算属性案例

案例需求，使用计算属性动态计算：

① 已勾选的商品总个数

② 已勾选的商品总价

③ 结算按钮的禁用状态

结算区域代码：

    <div class="settle-box">
      
      <span>总数量：{{ count }}span>
      
      <span>总价：{{ price }}元span>
      
      <button type="button" style="background-color: #f40;   border: 1px #f40 solid;" class="btn btn-		primary" :disabled="isdisabled">结算button>
    div>
1
2
3
4
5
6
7
8
9

计算属性相关代码：

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

完整代码-MyHeader.vue

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

完整代码-App.vue

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

完整打包源代码下载：

https://gitee.com/xingyueqianduan/vuecomputedfruit
1

写在最后

✨个人笔记博客✨

星月前端博客
https://xingyue.vercel.app/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！