vue.js框架自学笔记（2）--- computed vs methods,浅谈两者区别

在使用vue框架进行开发的时候，我们可以使用 methods 来替代 computed，效果上两个都是一样的。

但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

缓存，意思是computed属性只有在其依赖的值发生改变的时候才会出发进行再次计算，相当于一个缓存的作用，因而computed拥有更好的性能，因为其不用每次都重新渲染。

ar cnt=1;
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      cnt+=1;
      return cnt+this.message.split('').reverse().join('')
    }
  }
})

以上代码就完美的反应了两者的区别，cnt 是独立于 vm 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个计算属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。

引用：

https://blog.csdn.net/u013451157/article/details/78957258

https://www.runoob.com/vue2/vue-computed.html评论区