Vue中methods、watch和computed的关系

直接上一段代码（可以直接在vue-cli创建一个简单的Demo，把下面的代码copy到某个vue文件，如demo.vue中运行）

template>
  

    
{{ showInfo }}
    

      点击改变param1
      点击改变param2
      点击触发Mothed
    
  

依次点击三个按钮以及控制台输出结果

methods、watch和computed都是function，其中：

method是被动的，只有主动调用（如按钮等）才会执行，如上面的showData方法；

watch的直译意思是监听，所以监听的参数或者对象是必须存在的。当被监听对象发生改变，执行对应的方法，如下图的watch对param1的监听动作（其中param1这个变量需要在data中声明）；

点击按钮，修改param1，触发监听function(){}被执行

computed的直译意思是计算，它最直观的特点就是比watch多了个return。所以当计算方法内涉及的参数发生改变时（这种改变是计算过的，比如你赋值的参数和原先没有变化，这种不视为改变，也就是常常说的缓存），引用被计算的function的也会跟着改变，如上面的showInfo。

因为param2的改变，使用了param2的showInfo也会被触发