![剑指Vue3:从入门到实践](https://wfqqreader-1252317822.image.myqcloud.com/cover/329/51090329/b_51090329.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.2.2 计算属性和method方法
2.2.1节中计算属性的效果还可以通过在模板中调用method方法实现,它的实现结果与计算属性是一样的。
下面通过在模板中调用method方法来实现2.2.1节中测评结果的功能。
模板代码片段如下。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_34_4.jpg?sign=1738874325-LcmFXliJHqmc5Fezq7QyFs03JiJasPcg-0-801d0d7c51433aa18f5e46a8810d848a)
methods代码片段如下。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_34_5.jpg?sign=1738874325-bZ5bVT98HWmvUnt9YuTIkNSPn5HMHhy0-0-470ebc050603dcab8a2fbd9d6965cd48)
无论是初始化显示还是更新显示,其效果跟计算属性的效果都是一样的。尽管如此,我们在开发时还是会选择使用计算属性来实现。这是因为计算属性内会将计算属性函数返回的结果数据进行缓存处理,如果结果数据需要在页面中显示多次,那么计算属性函数只会执行1次,但method方法会对应执行多次。这样对比下来,计算属性的效率明显要比方法高。
下面修改一下模板,对计算属性和method方法再次进行测试。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_34_6.jpg?sign=1738874325-atRAGJU6JuXMF3cIu3xGaPdy3wJXhZZf-0-29a70993f40a76ecf6700901d455fbd6)
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_35_1.jpg?sign=1738874325-1jHn7xa6qy3h7NfssCkOU4ITmNzqN4sN-0-0f08b039e7e2b974b2482a11df722134)
当页面初始化显示时,计算属性函数只执行了1次,而method方法执行了3次。点击按钮更新,计算属性函数只执行了1次,而method方法执行了3次。因此当有可能存在结果数据需要显示多次的情况时,明显应该选择计算属性,因为其效率更高,但如果确定只显示一次,则method方法也是一个可以接受的选择。