Vue中计算属性的使用与方法的区别

1.计算属性的使用

使用v-model双向绑定的方式进行进行显示，可以看到咱们在使用fristName+"-"+lastName方式在上面的template里进行写代码多了就感觉很麻烦很臃肿。

我就可以使用计算属性的方式进行讲上面那段写在script中，当我们只有一段代码时就可写成下面这种，作用还是和上面是一样的使用计算属性需要在import中引入computed。

2.计算属性与普通方法的区别

1.普通方法：可以看到使用的普通方法调用了三次控制台也显示了三次，多次重复调用如果方法比较多那是不是就会非常消耗性能，速度也会变慢。

2.计算属性：使用了计算属性并且调用了三次，可以看到控制台只显示了一次，说明计算属性只调用了一次，这是因为计算属性会缓存它里面的代码，只要不对其进行修改它就只会从缓存中拿到这个去显示就不用调用多次了，主要的是用{}包裹时需要用return返回，因为它是属性直接调用名字就行了，方法就需要加括号。