Vue笔记(三):计算属性(computed)(Vue notes (III): calculated attributes)

时间:2022/01/14

时间:2022/01/14

计算属性可以通过内存来进行操作,类似于缓存的机制,对于不经常变化的值可以通过计算属性缓存起来,减少开销。

示例代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     
11     <div id="app">
12         <p>1:{{currentTime1()}}</p>
13         <p>2:{{currentTime2}}</p>
14     </div>
15 
16     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
17 
18     <script>
19         var vm = new Vue({
20             el: "#app",
21             methods: {
22                 currentTime1: function(){
23                     return Date.now();
24                 }
25             },
26             // 计算属性
27             computed: {
28                 currentTime2: function(){
29                     return Date.now();
30                 }
31             }
32         });
33     </script>
34 
35 </body>
36 </html>
————————

Time: January 14, 2022

Time: January 14, 2022

Computing attributes can be operated through memory, which is similar to the caching mechanism. Values that do not change frequently can be cached through computing attributes to reduce overhead.

The example code is as follows:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     
11     <div id="app">
12         <p>1:{{currentTime1()}}</p>
13         <p>2:{{currentTime2}}</p>
14     </div>
15 
16     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
17 
18     <script>
19         var vm = new Vue({
20             el: "#app",
21             methods: {
22                 currentTime1: function(){
23                     return Date.now();
24                 }
25             },
26             // 计算属性
27             computed: {
28                 currentTime2: function(){
29                     return Date.now();
30                 }
31             }
32         });
33     </script>
34 
35 </body>
36 </html>