Vue 计算属性与监听属性

前面的话

模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护。这篇文章将介绍计算属性与监听属性去解决该问题。

计算属性

[什么是计算属性?]

首先，来看一个字符串反转的例子：

    

         {{ message.split('').reverse().join('') }}
    
    

上面这个例子，在模板中表达式包括3个操作，相对比较复杂，也不容易看懂。

所以在遇到复杂的逻辑时应该使用计算属性。

将上例进行改写：

    
原字符串：{{message}}
    
计算后反转字符串: {{reverseMessage}}
 

上面的模板中声明了一个计算属性reverseMessage。
提供的函数将用作属性reverseMessage的getter（用于读取）。
reverseMassage依赖于massage，在massage发生变化时，reverseMassage也会更新。

[ computed Vs methods]

我们发现computed属性完全可以由methods属性所代替，效果时完全一样的。既然使用methods就可以实现，那么为什么还需要计算属性呢？原因就是computed是基于它的依赖缓存，只有相关依赖发生改变时，才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。可以说使用computed性能会更好。

[ 依赖缓存]

举一个更好说明computed是基于依赖缓存的例子:

 

        
原字符串：{{message}}
        
计算反转字符串：{{reverseMessage1}}
        
计算反转字符串：{{reverseMessage1}}
        
计算反转字符串：{{reverseMessage2()}}
        
计算反转字符串：{{reverseMessage2()}}

这个例子中，num是一个独立的变量。在使用reverseMessage1这个计算属性时，num会变成2 。但是当再使用reverseMessage1属性时，num没有变化，依然是2。因为Vue实例的message数据没有发生变化 于是DOM渲染就直接用这个值，不会重复执行代码。而reverseMessage2这个方法只要用一个，就要执行一次，于是每次返回的结果都不一样。

[computed setter]

每一个计算属性都包含一个getter与一个setter，上面的实例中都是计算属性的默认用法，只是利用getter来读取。
computed属性默认只有getter，不过在需要时可以自己提供一个setter函数，当手动修改计算属性的值时，就会触发setter函数，执行自定义的操作。
例如：

    
{{ site }}

上面的代码，当我们执行vm.site=‘baidu http://www.baidu.com’时，数据name与url都会相对更新，视图也会更新。

监听属性 watch

通过watch来响应数据的变化。
虽然大多数情况计算属性都可以满足需要，但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时，就需要自定义监听器。

[实例1]：通过使用watch实现计数器：

 

        
计数器：{{ counter }}
         点击我
 
 

注意：$watch是一个实例方法，后面是一个回调函数，这个回调函数将在counter值改变之后调用

[实例2]：千米与米之间的换算

  

        千米：
        米：
        

    
     

[computed与watch的区别]

简单来说：
1：computed是同步的，watch可以实现异步
2：computed中的函数都是带返回值的，wacth里面的函数可以不写返回值。

我们可以在watch属性的方法里执行异步操作，使用定时器来限制操作的频率吧，添加中间状态等等，这些操作都是无法用计算属性实现的。

 

      {{count}}
      点击加一
 

当watch监听到count值发生变化时，2秒之后归零

计算属性、指令实现简单实战

实例：通过计算属性、指令等实现简单的购物车

 
    

        

            

                
序号
                
商品名称
                
购买价格
                
购买数量
                
操作
            
            

                
{{iphone.id}}
                
{{iphone.name}}
                
{{iphone.price}}
                

                    
                    -
                    {{iphone.count}}
                    +
                
                

                    移除
                
            
        
        总价：${{totalPrice}}