Vue-计算属性和属性监听器

---

什么是计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护,也就是当逻辑比较复杂时，应该使用计算属性。

如何使用？
把computed中的方法当做属性使用,会返回一个数据供使用:
比如当我们计算用户多久前发表的评论时:

   



    

        

            {{item.name}}
            
{{item.posted}}
            
{{postedTime(item.postedtime)}}
        
    
    

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

还可以通过对象的set和get形式

    

        
        点击修改value值
    
     //引入vue.js文件

        
{{name}}
        点我修改name   //点击修改name值
    
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

点我点击修改后

案例:实现歌曲试听时的进度条

    



    

        

            进度条
            {{timelang-time|timerparser}}
        
        开始
        

             

        
    
    
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

为了直观侦听结束时，只截取了3分14秒时

小结：
watch:{xxx(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性
当侦听器监听的属性发生变化时,就会调用watch中对应的方法
侦听器属性，比计算属性计算效率消耗大