computed 、methods 和 watch

computed 和 methods
　　在new Vue的配置参数中的computed和methods均可以处理大量的逻辑代码，可是何时用哪一个属性，要好好区分一下才能作到正确的运用vue。
computed称为计算属性，顾名思义，计算就要返回一个计算的结果，因此，当咱们要处理大量的逻辑，可是最后要取得最后的结果的时候能够用computed；
简单示例：
要求：
<input type="text v-model="num1"><input type="text v-model="num2">
如今要返回num1和num2的和；

<script>
    new Vue({ el:"#box", data:{ num1:0, num2:0 } computed:{ result:function(){ return this.num1 + this.num2 // 计算属性必须有一个返回值
 } } }) </script>

methods：是方法的意思，在js中，咱们把一些函数叫作方法，通常状况下，要触发这个方法就要执行，要执行就要有一个源来触发，因此就须要一个事件源。
这是和computed的一点不一样之处；
methods的示例：

<\button @click="do()">点击弹出<\/button>
<script>
    new Vue({ el:"#box", data:{ num1:0, num2:0 } methods:{ do:function(){ alert('ok') //这里根据状况，能够返回有返回值也能够没有返回值。
 } } }) </script>

对比computed 和 methods：
computed计算的结果若是不发生改变就不会触发result这个函数。而methods中通常都是定义的须要事件触发的一些函数。每次只要触发事件，
就会执行对应的方法。若是把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值，而methods中能够只执行逻辑代码，能够有返回值，也能够没有

computer 和 watch

//这是computer的
var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

//这是watch的说法

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

总结computer和watch：

计算属性是计算属性，观察是观察。

计算属性顾名思义就是经过其余变量计算得来的另外一个属性，fullName在它所依赖firstName，lastName这两个变量变化时从新计算本身的值。

另外，计算属性具备缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 lastName和firstName都没有发生改变，屡次访问 fullName计算属性会当即返回以前的计算结果，而没必要再次执行函数。

而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，咱们能够检测页码执行获取数据的函数。

能够再详细的查看一下文档：https://cn.vuejs.org/v2/guide...