Vue中computed、methods、watch的区别

最近一直在学前端Vuejs，对于新手，很是整不明白Vuejs中的computed、methods、watch的区别。

其实官方文档给的还是很清楚的，但是对于新手，还是摸不透。

官方文档地址：https://cn.vuejs.org/v2/api/#computed

1. computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

2. methods：methods (方法) 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

3. watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是字符串，方法，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

通俗来讲，

computed是在HTML DOM加载后马上执行的，如赋值；

methods则必须要有一定的触发条件才能执行，如点击事件；

而watch呢？它则用于观察Vue实例上的数据变动。

下面开始上demo：

    
    
    


    

        {{x}}___{{y}}___{{z}}___{{D}}
        

            Click
        
        

            
        
    
    

默认进入之后：

image.png

点击三次按钮之后：

image.png

所以他们的执行顺序为：

默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。