vue的计算属性computed与监听属性watch

一、计算属性computed

• computed是计算属性，也就是计算值，多用于计算值的场景

• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

• computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值才会重新调用对应的getter来计算。也就是说，只有依赖数据发生改变时，才会重新进行计算

• 如果一个属性是由其他属性计算而来，这个属性依赖其他属性，一般用computed

• 如果computed属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值，在computed中，属性都有一个get和set方法，当数据变化时调用set方法

• computed适用于计算比较消耗性能的计算场景

• 可以当属性直接使用

• 
      
      
  
          +
          =
          
      
      
  
  

  
      
      
  
          +
          =
          
      
      
  
  

  示例

    

        
总价：{{totalPrice}}
    
  
    

二、watch监听属性

watch是一个侦听的动作，用来观察和响应Vue实例上的数据变动

• 更多的是"观察"的作用，类似于某些数据的监听回调，用于观察props、$emit或者本组件的值，当数据来回变化时来执行回调进行后续操作

• 无缓存性，页面重新渲染时值不变化也会执行

• watch支持异步

• 监听的函数接收两个函数，第一个参数是新值，第二个参数是旧值

• 当一个属性发生变化时，需要执行对应的操作

  应用场景

• 根据tab的切换，不管在哪个页面修改了数据，点击切换的时候要提示未保存，是否确认离开。这里就用到侦听器了，监听数据的变化

• 数据变化时执行异步或开销较大的数据：

• 验证用户名是否可用：需求：输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用

    
    

        

            名：
            
              
            
          
          

            姓：
            
              
            
          
          
{{fullName}}
  
    
    

 三、computed计算属性和watch监听属性的区别

computed计算属性	watch监听属性
get函数中必须要有return	watch中的函数return可有可无
computed 计算属性名称可以自定义	watch中的名称必须和data中的名称一致
computed 计算属性具备缓存	watch不具备缓存
computed 计算属性适合处理一些复杂的数据运算	watch适合处理一些消耗性能的需求，比如：Ajax请求等等

 

• 当要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

• 如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化