https://cn.vuejs.org/v2/guide/computed.html#计算缓存-vs-Methods
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })
我们可以使用methods 来完成计算属性需要完成的事,
// in component methods: { reverseMessage: function () { return this.message.split('').reverse().join('') } }
最终结果二者是一样的。
区别:
官网表明计算属性是基于它的依赖缓存。
计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 message 没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
每当重新渲染的时候,method 调用总会执行函数。
也就是说只要不是直接使用浏览器刷新页面,当我们改变数据、DOM操作等引起页面重新渲染时,
计算属性会直接使用缓存,不会重新执行函数。适合那些计算量很大且改变频率很低的属性;
如果使用methods,每次页面重新渲染时都会重新执行methods函数。