Vue进阶（二十八）：浅析 Vue 中 computed 与 method 区别_vue-cli的method(3)

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

<p class="test2-1">{{methodTest()}}</p>
<p class="test2-2">{{methodTest()}}</p>
<p class="test2-3">{{methodTest()}}</p>
<p class="test3-1">{{computedTest}}</p>
<p class="test3-2">{{computedTest}}</p>

let vm = new Vue({
el: ‘#app’,
data: {
message: ‘我是消息，’
},
methods: {
methodTest() {
return this.message + ‘现在我用的是methods’
}
},
computed: {
computedTest() {
return this.message + ‘现在我用的是computed’
}
}
})

### 二、computed 属性调用


在`HTML`的插值里`computed`中定义的方法是以属性访问形式调用的，`{{computedTest}}`  
 但是`methods`定义的方法，必须要加上()来调用，如`{{methodTest()}}`，否则，视图会出现test1的情况，见下图  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181223111322862.png)


### 三、computed 缓存功能


首先，要明白缓存究竟有什么用？想必大家都知道`HTTP`缓存，其核心作用就是**对一些服务端未更新的资源进行复用，避免一些无谓的请求，优化用户体验。**


对于`computed`也是一样的：  
 在上面的例子中，`methods`定义的方法是以函数调用的形式来访问，那么test2-1,test2-2,test2-3是反复地将`methodTest`方法运行了三遍，如果碰到一个场景，需要1000个`methodTest`的返回值，那么毫无疑问，这势必造成大量性能浪费。


更恐怖的是，如果更改了`message`的值，那么这1000个`methodTest`方法每一个又会重新计算。


所以，**官方文档反复强调对于任何复杂逻辑，都应当使用计算属性。**


`computed`依赖于`data`中的数据，只有在它的相关依赖数据发生改变时才会重新求值。


如上例，在`Vue`实例化的时候，`computed`定义`computedTest`方法会做一次计算，返回一个值，在随后的代码编写中，只要`computedTest`方法依赖的`message`数据不发生改变，`computedTest`方法是不会重新计算的，也就是说test3-1,test3-2是直接拿到了返回值，而非是`computedTest`方法重新计算的结果。


这样的好处也是显而易见的，同样的，如果碰到一个场景，需要1000个`computedTest`的返回值，那么毫无疑问，这相对于`methods`而言，将大大地节约内存。哪怕改变了`message`的值，`computedTest`也只会计算一次而已。


### 四 、computed 其它说明



> 
> * `computed`其实是既可以当做属性访问也可以当做方法访问。
> * `computed`的由来有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护。
> 
> 
> 


### 五、拓展阅读


* 《[Vue进阶（八十四）：vue中Computed 和 Watch的使用和区别](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》
* 《[Vue进阶（八十三）： updated和watch的区别](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》
* 《[Vue进阶（八十二）：vue 中updated的使用](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)》




# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/9f26aec3222be2d8eb77429b5f85625f.webp?x-oss-process=image/format,png)

/bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-6cqCncyV-1715840855555)]