详解Vue: computed, methods, watch的区别和联系

       在刚开始实习的时候，突然发现我对computed, methods, watch之间的区别还不是非常透彻，只知道它们大概的含义和用途。下面是我整理的这三个属性的区别和联系。

computed:

   模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

     在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于一些复杂逻辑，你应当使用计算属性。优化后： 

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: "Hello"

Computed reversed message: "olleH"

 methods:

methods是Vue提供的逻辑运算的单元，和其它语言中的方法功能一致。对于上述的功能，也可以用methods来实现：

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed和methods的区别：

1.监听相关值的变化： methods方法执行一次就结束了，如果后面message的值再次变化了，reversedMessage不会重新被渲染；而computed就不同了，当关联属性message发生变化后，computed会重新执行一遍，把根据变化后的属性值计算出来的新值重新渲染到页面上。

2.计算缓存：computed翻译过来是计算属性，所以它可以被当成一个属性来使用（而上面computed被当成方法来使用，说明computed就像光一样，具有“波粒二象性”。computed是不是很厉害！），属性可以使用的地方它都可以使用（当然方法可以使用的地方它也可以）：也就是说，计算属性不仅可以在模板中使用，在js代码中也可以使用。缓存体现在：计算属性只有当所关联的属性变化时，它才会重新计算一遍，而不变的时候，它一直取上次计算的值，这是与methods最大的区别之处。

当然，methods也有自己的优势，比如methods在被调用时可以传入参数，且methods可以进行更加复杂的逻辑运算。有些场景，用computed并不适合，如：

computed: {
  now: function () {
    return Date.now()
  }
}

这种情况下，Date无法做到响应式计算更新

watch:

监听器，监控相应的属性，当属性发生变化，调用对应的回调函数

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 你可以传入回调数组，它们会被逐一调用
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意：不应该使用箭头函数来定义 watcher 函数 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。

computed和watch的区别：

     首页明白一点：watch是监控影响因素（影响要使用属性的因素），而computed是计算属性，对应的函数里包含影响因素。

当然，当computed和watch都能实现时，优先选用computed，因为简单。但有些情况，没法使用computed来实现，比如当遇到复杂计算逻辑或者异步调用时，如：

<div id="watch-example">
            <p>
              Ask a yes/no question:
              <input v-model="question">
            </p>
            <p>{{ answer }}</p>
  </div>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
      question : function (newValue, oldValue){
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
        setTimeout(function () {
          vm.answer =  "Vue2"
        },1000)
      }
  }
})

  

上面用watch可以实现，但是如果用computed就不能实现了，如下： 

<div id="watch-example">
            <p>
              Ask a yes/no question:
              <input v-model="question">
            </p>
            <p>{{ answer }}</p>
  </div>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',

  },
computed: {
    answer: function () {
      
        if (this.question.indexOf('?') === -1) {
        return 'Questions usually contain a question mark. ;-)'
        
      }else{
      setTimeout(function () {
          return "Vue2"
      },1000)
      
    }
  },
  }
})

发现：answer并没有变为Vue2, 也就是说它不会等到异步调用结束才返回值，这是因为计算属性本质还是属性，如果不能立马返回，那么在这空档期该显示什么呢？所以计算属性如果不能立马返回，那么就返回空值。

ps：创作不易，如有帮助，多多点赞，谢谢支持