方法methods 和计算属性computed的区别对比
1.从功能上看methods 和computed是一样的，那为什么还要有一个计算属性呢？
2.原因就是因为计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
3.methods则会调用多次
HTML部分
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- methods 调用4次 会每次重新计算一次-->
<h2>{
{
getFullName()}}</h2>
<h2>{
{
getFullName()}}</h2>
<h2>{
{
getFullName()}}</h2>
<h2>{
{
getFullName()}}</h2>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- computed 1.计算属性只调用一次-->
<!-- 2.计算属性调用的是属性所以只书写属性名不用加（）-->
<h2>{
{
fullName}}</h2>
<h2>{
{
fullName}}</h2>
<h2>{
{
fullName}}</h2>
</div>
</body>
</html>
Vuejs部分
let vue = new Vue({
el: '#app',
data: {
firstName: 'Jackson',
lastName: 'Yee'
},
methods: {
// 方法
getFullName () {
console.log('getFullName')
// 打印结果调用了 4次
return this.firstName + ' ' +this.lastName
}
},
computed: {
// 计算属性
fullName () {
console.log('fullName')
// 打印结果只调用了 一次 fullName
return this.firstName + ' ' + this.lastName
}
}
})
1.使用methods调用的打印展示
methods中的方法多次调用便打印了多次
2.使用computed计算属性的调用打印展示
computed计算属性中的方法只调用了一次便只打印了一次
总结：
1.为什么methods方法会掉用多次？因为没有进行缓存，所以多次使用时就会多次调用；
2.为什么computed计算属性只会调用一次？因为有进行了缓存，如果使用多次时，只会调用一次。
3.除非一些需要使用methods方法的再特别使用，一般情况使用computed计算属性来写方法回调