目录
注意：如果像弄明白这个问题，必须得清楚methods，computed，watch 到底是上什么得问题？
1、什么叫methods方法？
<div>{
{ num }}</div>
<button @click='addNum'> +1 <button>
<script>
methods：{
addNum() {
return this.num += 1
}
}
</script>这里的 @click 叫点击事件， addNum 叫事件处理函数名
在 methods 节点中定义这个 addNum() 函数，然后addNum() 这个函数的返回值是
this.num += 1 这个代码的意思是：让这里的num值加上1 然后再赋值给自生num
2、什么叫computed属性？
结构模板中的标签内使用js表达式，设计的目的只是为了简单的运算。如果行内标签里面的有太多的逻辑，会让结构模板过重且难以维护。所以，对于任何复杂的逻辑，官方都推荐使用计算属性即computed节点。
<div>
{
{message.split('').reverse().jion()}}
<div>这样写就会让结构显的特别重，而且不好维护。所以一般都会写把这些写到 computed 计算属性里面。
<div>
// 这里的计算属性代替了上面的复杂运算
{
{ reverseMessage }}
</div>
<script>
computed:{
reverseMessage：funciton () {
return this.message.split('').reverse().join()
}
}
</script>3、什么叫 watch 属性？
watch 属性可以用来监听 data 属性中数据的变化
原来input框内显示 hello vue.js 分别输入1 和 2 的控制台打印的情况
4、 methods与 computed 对比
a.方法 methods 方法 .test2-1中p标签的值需要调用methodTest（）函数一次，test2-2又要调用这个函数，也就是说用一次这个值就要调用一次这个函数，假设有1万个这样的岂不是反复的掉用这个函数呢，毫无疑问，这势必会造成大量的浪费，更恐怖的是如果你改变msg 的值，这个1w个 methodsTest() 方法会每一个又会重新计算........
所以官方文档反复强调对于任何复杂逻辑，你都应当使用计算属性。
b.计算属性 computed 是依赖于data中的数据，并且computed的值有缓存，只有在它依赖数据发生改变时computed 属性才会重新计算。只有计算值变化才返回内容。
c.watch 监听到值的变化就会执行回调。只有在处理异步的时候选择watch。
总结：
除非不希望缓存，一般不会用methods；
一般来说需要依赖别的属性来动态获取值的时候可以使用，computd；
对于监听到的值的变化需要做异步操作或者开销比较大的操作时用watch。