vue.js计算属性(computed)、方法(methods)、侦听属性(watch)的区别与使用场景

1.计算属性与方法

1. 我们可以像绑定普通属性一样在模板中绑定计算属性。
2. 计算属性是基于它们的依赖进行缓存的。也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着，上述案例中，只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。但是也因此有缺点，某些地方是不能即使进行响应变化。
3. 相反，每当触发重新渲染时，调用方法将总会再次执行函数。
4. 假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

computed区别于methdos的两个核心如下：

1.computed是属性调用，而methods是函数调用
2.computed带有缓存功能，而methods不是

<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '现在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '现在我用的是computed'
        }
    }
})
</script>

 

computed定义的方法我们是以属性访问的形式调用的，在vue里面使用不带（）的形式，调用。
methods定义的方法，我们必须要加上()来调用，否则会报错。

computed的缓存：

其核心作用就是对一些服务端未更新的资源进行复用，避免一些无谓的请求，优化了用户的体验对于computed也是一样的。对于在页面上需要反复调用的数据，如果使用methods方法，每一次调用都要执行一次方法，势必会造成浪费，而且每一次方法的调用又会重新计算一遍属性。所以vue对于复杂的逻辑，一般都采用的是计算属性computed，而不是方法。

另外computed属性，在vue里面用来触发setter和getter方法

setter方法在设置值时触发

getter方法在获取值时触发

computed:{
  fullname:{
      set(){
      },
      
      get(){
       
        return this.firstname + " " + this.lastname;
      },
   }
}

2.侦听属性

• 虽然计算属性在大多数情况下非常适合，但是有些情况下我们就需要自定义一个watcher，在数据变化时来执行异步操作。侦听属性是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
• 当一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script>

  export default{
  var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
  }

</script>

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。而这些都是计算属性无法做到的。

 

总之，当页面内部使用了复杂的逻辑表达式，首选使用计算属性，methods方法虽然能实现，但是会增大开销，计算属性基于缓存，具有更优性。当需要在数据变化时执行异步或者开销较大的操作时，则优先考虑watch属性。