computed,watch,methods的区别和使用时机

看看他们的特点：

computed：计算属性，基于他们的响应式依赖进行缓存，只有相关依赖发生改变时才会重新计算，对于任何复杂逻辑
watch：它一般来监听页面上的Vue实例的变化
methods：给Vue定义方法，也可以基于依赖产生一个新数据，但不具备缓存

·methods经常会和computed进行对比，他们都可以定义函数，最终得到的效果都是一样的

我们一起来看看他们的区别，首先对字符串进行分割翻转合并

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'helloWorld',
      age: 18
    }
  }
</script>

看看效果：

---

如果页面中很多地方都需要使用到，那么我们一直这样写就太繁琐了 所以在methods里面定义一个方法，再调用

试试看：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMsg() }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'helloWorld',
      age: 18
    }
  },
  methods: {
    reverMsg: function () {
      console.log(1)
      return this.message.split('').reverse().join('')
    }
  }
</script>

可以看到更简洁了，也方便复用

---

再看看computed，在什么时候使用呢？

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMssage }}</p>
    <p>{{ reverMssage }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'helloWorld',
      age: 11
    }
  },
  methods: {
    reverMsg: function () {
      console.log(1)
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    reverMssage: function () {
      console.log(2)
      return this.message.split('').reverse().join('')
    }
  }
</script>

可以看到，methods打印两次，computed只打印了一次，所以在任何有复杂逻辑的时候，我们就可以用到computed

---

接下来看看methods里面age的变化，我们定义一个点击事件去触发它

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMssage }}</p>
    <p>{{ reverMssage }}</p>
    <p>快乐：{{ age }}</p>
    <button @click="addAge">增加快乐</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'helloWorld',
      age: 11
    }
  },
  methods: {
    reverMsg: function () {
      console.log(1)
      return this.message.split('').reverse().join('')
    },
    addAge: function () {
      this.age++
    }
  },
  computed: {
    reverMssage: function () {
      console.log(2)
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

可以看到只要发生渲染，methods调用总是会被执行，所以在调用addAge的时候就会一直打印1

---

再来看看watch监听的变化

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMsg() }}</p>
    <p>{{ reverMssage }}</p>
    <p>{{ reverMssage }}</p>
    <p>快乐：{{ age }}</p>
    <button @click="addAge">增加快乐</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'helloWorld',
      age: 11
    }
  },
  methods: {
    reverMsg: function () {
      // console.log(1)
      return this.message.split('').reverse().join('')
    },
    addAge: function () {
      this.age++
    }
  },
  computed: {
    reverMssage: function () {
      console.log(2)
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    //新值，旧值
    age: function (newValue, oldValue) {
      console.log(newValue)
      console.log(oldValue)
    }
  }
}
</script>

可以看到，如果在数据变化的同时，我们需要进行一些异步操作或者做一些比较大的开销，我们就使用watch