通过方法拼接数据，实现计算属性缓存效果

原创

用户7365393

修改于 2021-09-26 17:33:28

3150

修改于 2021-09-26 17:33:28

代码如下。

<div> {{ full() }} </div>
  
data(){
 return{
  first:'美女',
  second:'姐姐'
 }
},
methods:{
 full(){
 return this.first + ' ' + this.second
 }
},

一个页面内，数据有可能多次使用，我们把 computed 和 method 两个方法放一起实现，并把这个数据在页面内多次引用，试看以下效果。

<div>
  computed计算值：
  {{full}} {{full}} {{full}} {{full}}
</div>

<div>
  methods计算值：
  {{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>

data(){
 return{
  first:'美女',
  second:'姐姐'
 }
},
computed:{
 full:function(){
  console.log('computed')
  return this.first + ' ' + this.second
 }
},
methods:{
 fullt(){
  console.log('方法')
  return this.first + ' ' + this.second
 }
 }

运行结果为：