vue中watch,computed,methods的区别

以下仅是个人理解，如果发现有问题，可留言评论
个人总结：methods,computed,watch都可达到同样的结果，只是在适用场景上哪种更好罢了（表格中看不懂的，可依据代码中注释理解）

methods:	a.用于定义方法，可使用组件来触发里面定义的方法， b.每次触发，都要执行一次方法
computed:	计算属性：a.用于处理任何复杂的逻辑运算,可在其中定义函数或者属性 b.基于响应式依赖进行缓存，当里面使用到的属性发生变化时，才会重新求值(当最外面的属性名被重新赋值，里面的相关联属性也会做出相应的改变) c.可用于性能开销较大的计算。可用于数据随某些数据的变动而改变的情况
watch:	a.只能监控变化的属性，才会触发,不能监控因数据变化而变化的属性，即只能监控属性名对应的值变化时触发 b.当需要在数据变化时执行异步或开销较大的操作时，这个方法最有用

//下面是部分代码片段
<span>{{fullName}}</span>
<el-button @click="s">调用computed</el-button>
<span>{{firstName}}</span>
<span>{{lastName}}</span>
<el-button @click="s1">调用watch</el-button>
<span>{{watchAll}}</span>
<el-button @click="s2">更改computed中fullName</el-button>
 data () {
      return {
        firstName:"12",
        lastName:"34",
        watchAll:""
      };
    },
  computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    },
  methods:{
  //调用该s方法时，计算属性也会被重新执行(fullName值会发生改变)
        s(){
         this.firstName="computed";
    },
    //调用该s1方法时，监听会被触发执行，（lastName也会被改变，同时计算机属性会被重新执行）
    s1(){
      this.watchAll="watch"
    }，
    //调用该s2方法时，计算属性会被新执行（lastName，firstName的值也会发生改变，监听不会被重新执行）
    s2(){
      this.fullName="111"
    }
  },
  watch:{
    watchAll:function(){
       this.lastName="watch";
    }
  }