Vue简单介绍计算属性和侦听器的区别？

Vue计算属性的主要目的是计算一个新的值，而监听器的主要目的是观察一些数据的变化并做出相应的调整。下面web建站小编给大家简单介绍一下计算属性和侦听器的区别？

Vue计算属性：

1、基于它们的反应依赖关系进行缓存，并且仅当相关的反应依赖关系改变时才重新计算。
2、计算属性是一种属性，必须有返回值。
3、用法：Computed:{ somecouteproperty(){ } }

示列如下：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p> 
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Vue侦听器：

1、观察数据变化的更通用的方法。
2、它是一个方法，不需要返回值。
3、用法：watch: {someProperty() {}}

示列如下：

<div id="app">
  <p>{{ message }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})