使用vue已经有一段时间了，项目当中遇到过很多问题。
之前会通过社区，博客和百度来观摩学习大佬前辈们的解决思路，最后转换到项目和工作当中来解决现有的问题。
这里是我在解决问题当中对一些点的整理，或者说自我理解。
关于methods，computed，watch的区别，先结合官网给出解释来区别计算属性和方法
，
这里methods方法和computed计算属性，官网给出最大的区别就是计算属性依赖于data里的数据，而方法不依赖。
这里的依赖通俗地讲，如果data里的数据发生变化，computed会根据其函数里面包含的计算属性重新计算；反之，数据如果无变化，computed会直接从缓存里拿到上次的计算结果。
以上就是我对官网解释的理解。然而，其实在使用过程中，computed与methods的区别还有一些。
写法区别：computed最后一定要有个返回值，而且不带参数；methods的返回值和参数都是可有可无的。
用法区别：computed形式上是function()函数，但是可以理解为data里面的数据，并且这样使用；methods就是普通的function()函数
场景区别：computed监听data里的数据变化，会根据data数据变化而自动重新计算；methods无法监听data数据
另外就是watch了，其实watch是computed的一个拓展，与computed形成互补，作用都是监听data()数据。而区别就是computed监听数据，需要返回切必须返回一个新的值(形式上function，本质是data)，所以监听之后随动的数据只有一个(return后的数据);watch则是不管是形式还是本质都是一个function，所以可以监听数据，并随动改变多个值。
下面是我做的一个表格总结
| 区别 | 形式 | 本质 | 场景 | 写法 | 用法 | 位置 |
| methods | function | function | 逻辑方法处理 | 可以带参数及返回值 | 使用一次调用一次 | vue标签v-on 生命周期函数 methods调用其他 |
| computed | function | data | 监听data | 必须携带返回值，不允许参数 | 一次调用，可以看作data | 一般直接当做data在vue标签{{}}，v-bind中使用 |
| watch | function | function | 监听data | 不允许参数和返回值 | 调用一次永久使用 | 一般在生命周期函数，或者在methods被其他方法调用 |
以上是我对methods，computed和watch的自己的理解，如果谬误或表达有误，还望指正。