Vue使用计算属性computed和方法区别

将相同的操作定义为一个方法，或者定义为一个计算属性，两种方式的结果完全相同。 然而，不同的是计算属性是基于它的依赖进行缓存的。使用计算属性时，每次获取的值是基于依赖的缓存值。当页面重新渲染时，如果依赖的数据未发生改变，使用计算属性获取的值就一直是缓存值。只有依赖的数据发生改变时才会重新执行getter。相比之下，每当触发页面重新渲染时，调用getTimeM()方法总是会再次执行函数，因此会输出最新的时间。

教材4-1.3举例：

其中，为更清楚的说明，添加了age内容。代码如下：

<div id="app">

<input v-model="message">

<p>{{message}}</p>

<p>{{getTimeC}}</p>

<p>{{getTimeM()}}</p>

<p>{{age}}</p>

</div>

<script type="text/javascript">

var vm = new Vue({

el: '#app',

data: {

message: '',

time: '当前时间: ',

age: '25'

},

computed: {

//计算属性的getter

getTimeC: function () {

console.log('调用getTimeC，使用了一次计算属性');

var hour = new Date().getHours();

var minute = new Date().getMinutes();

var second = new Date().getSeconds();

return "使用计算属性获取值时：" + this.time + hour + ":" + minute + ":" + second;

}

},

methods: {

//调用方法的getter

getTimeM: function () {//获取当前时间

console.log('调用getTimeM，使用了一次方法');

var hour = new Date().getHours();

var minute = new Date().getMinutes();

var second = new Date().getSeconds();

return "调用方法获取值时：" + this.time + hour + ":" + minute + ":" + second;

}

}

})

</script>

• 运行上述代码，在页面中会输出一个文本框，分别通过计算属性和方法获取的当前时间，以及age内容。初始显示结果如下图：

• 在文本框中输入内容后，页面进行了重新渲染。

• 若此时同样改变与计算属性依赖的无关age内容，不会再次执行函数，因此会输出缓存的时间，如下图：

• 只有在改变getTimeC 计算属性所依赖的time 属性，当页面重新渲染时，会再次执行函数，输出最新的时间，如下图：