前端框架基础 Vue03

计算属性 Computed

计算属性主要是用于对各个状态之间进行运算，数据过滤的一种处理

{{  name + version }}
  //运算结果直接拼接
{{  getFullAppVersionName() }}
  //函数
{{  fullAppVersionName }}
  //计算属性


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

计算属性 VS 方法&视图表达式

计算属性是具有数据缓存的，当其依赖的状态没有发生变化时，计算属性是不会调用求值的。方法&视图表达式每次都会进行求值，并更新视图

计算属性的完整写法

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

watch 数据监听

允许我们对任意一个已经注册过的状态，进行监听，如果状态值发生变化，可以进行回调处理

价格： {{ price }}

总价格：{{ totalPrice }} 


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

watch VS computed

• 共同点： 都是在基于状态的变化，而触发一个函数的回调
• 区别
• watch 是一个单纯的监听回调函数，因此内部可以写异步操作，而computed是利用函数的返回值作为计算属性值的。只能是同步过程

   export default {
      data(){
        return {
          count : 10
        }
      },
      watch : {
         //监听count变化
         count(){
            setTimeout(()=>{
                this.count++
            },3000)
         }
      },
      computed : {
          //新增计算属性
          countA(){
             setTimeout(()=>{
               //这样写是无法实现的
               this.countA =  this.count++
            },3000)
          }
      }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• watch一次是只能监听一个值的变化， 计算属性任何一个状态变化，都会触发运算
• 面对复杂多状态运算结果的情况下，使用计算属性代码更简洁

价格：  

总价格：{{ totalPrice }} 
总价格：{{ cTotalPrice }} 


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

对于多状态变化且同步的运算，使用计算属性
对于单状态，或监听状态变化后有异步操作业务的，使用watch

watch 完整写法 & 深度监听

   export default {
       data(){
         return {
            obj : {
               name : "李雷",
               age  : 12
            }
         }
       },
       watch : {
         //监听obj的name属性
         "obj.name" : {
           handler(newVal, oldVal){
              //newVal：是变化后的值
              //oldVal: 是变化前的值
              
           }
         },
         //直接监听对象
         obj : {
            handler(newVal,oldVal){
               
            },
            deep : true //开启深度监听
         }
          
       }
   }
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