Vue中Computed和Watch的用法及其区别

 计算属性（computed）

我们都知道vue在模板中使用表达式非常便利，比如{{message}}；其实vue是支持更复杂的逻辑的，比如{{message+message1+message2}}，但vue建议我们使用一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

示例

如：a=1,b=2,c=3，计算a+b+c并展示到页面上

写法1（多表达式）：

 

      
{{a+b+c}}
 

写法2（计算属性）：

    
{{d}}

比较一下

1.这两种写法都能够得到我们想要的结果；

2.第一种多表达式的写法毫无疑问会监控a、b、c这3个属性，跟随属性而变化，第二种计算属性d也是依赖于a、b、c，当这3个属性发生变化，d也会跟着更新。

3.这里仅仅是a+b+c这里简单的逻辑，所以看不出这两种有多大区别，一旦过多的逻辑运算会让模板变得复杂且难以维护，而且这种转化无法复用；用计算属性的话逻辑简单清晰、好维护且易复用。

当然method也能实现，对，你肯定也想到了

下面的实例是将计算属性和方法的使用放到一起来做比较

  

        
计算属性第1次:{{d}}
        
计算属性第2次:{{d}}
        
计算属性第3次:{{d}}
        
计算属性第4次:{{d}}
        
方法调用第1次:{{modthod_d()}}
        
方法调用第2次:{{modthod_d()}}
        
方法调用第3次:{{modthod_d()}}
        
方法调用第4次:{{modthod_d()}}
    

运行到浏览器中，看输出

对比一下

1. 都能正确的调用，并且如果我们改变其中的依赖就会产生更新；
2. 使用method：使用几次就执行相应的函数几次，所以method_d被打印了4次；
3. 使用计算属性：因为有缓存，如果依赖的数据未发生变化，多次访问则函数只执行一次，所以computed_d仅仅打印了一次，因为第一次计算后就有缓存了，后续无需再计算了；
4. 计算属性因为有缓存的存在，所以可以节省一些资源，性能肯定就有所提高了，故更建议使用计算属性。

计算属性的setter getter

一般情况下，我们只是使用了计算属性中的gettter属性（如上面的几个例子），但它是支持setter属性的，如下：

 

        
计算属性:{{d}}
        set计算属性
    

页面效果

对象监控实例（一个一个的属性监控）

  

        
{{person}}
        
    

测试一下：

深度监控对象（就是不用每个属性都单独写监控，一次监控此对象的所有属性）

 

        
{{person}}
        name:

        age:
    

页面效果：

计算属性 和属性监听的区别：

1.计算属性变量在computed中定义，属性监听在data中定义。

2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

 

这两者选择和使用没有对错之分，只是希望能更好的使用，而不是滥用，我个人更喜欢用计算属性。