vue中计算属性和方法

方法

var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello',
},
	methods: {
		reversedMessage: function() {
			return this.message.split('').reverse().join('');
		},
	},
});

计算属性

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
  	// 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

方法写在methods中，计算属性写在computed中，渲染的方式都是一样的{{message}}。
以方法的形式写，每当触发重新渲染时，调用方法将总会再次执行函数。而计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。