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

本文介绍了Vue中computed属性的使用,强调了它在性能上的优势,尤其是在处理大量计算和数据变化时,相比于methods,能有效减少重复计算和内存消耗。同时提到了computed的缓存功能以及其在维护性和优化用户体验方面的价值。
摘要由CSDN通过智能技术生成
<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)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值