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

<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/topics/618166371)》
* 《[Vue进阶（八十三）： updated和watch的区别](https://bbs.csdn.net/topics/618166371)》
* 《[Vue进阶（八十二）：vue 中updated的使用](https://bbs.csdn.net/topics/618166371)》




### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

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

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)