vue-methods方法与computed计算属性的差别

蔚落 2024-04-20 11:09 5阅读 0赞

好吧，我就是单纯的举个例子：实现显示变量 `message` 的翻转字符串

第一种：methods：我们可以通过在表达式中调用方法来达到同样的效果：

![1048652-20190809233628699-1419737079.png][]

第二种：computed:计算属性

![1048652-20190809233851124-1734148845.png][]

上面的2中方法都实现了我想要实现的效果。但是

注：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 `message` 还没有发生改变，多次访问 `resvermessage`计算属性会立即返回之前的计算结果，而不必再次执行函数。

![1048652-20190810000748278-56884900.png][]

![1048652-20190810001037214-922755685.png][]

** 由上面2张图对比可以表现出：红框中圈中的属性只要在data里设置了初始值，下面的computed计算属性就没有任何效果了**

转载于:https://www.cnblogs.com/liuqingxia/p/11330196.html

[1048652-20190809233628699-1419737079.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0057e7614f8043b080339377fee6f2d4.png
[1048652-20190809233851124-1734148845.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3e65ca95e9da449b8138a429ecdbda80.png
[1048652-20190810000748278-56884900.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/637b95c4f9b445219d9d86c38c1a0d21.png
[1048652-20190810001037214-922755685.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/87620b07d5a14c1fb1c944b8b0cde5e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-methods方法与computed计算属性的差别

吧，我就是单纯的举个例子：实现显示变量 `message` 的翻转字符串第一种：methods：我们可以通过在表达式中调用方法来达到同样的效果： ![1048652...

蔚落/ 2024年04月20日 11:09/ 0 赞/ 6 阅读

相关浅谈Vue中计算属性（computed）和方法（methods）的差别

浅谈Vue中计算属性（computed）和方法（methods）的差别 [源码地址][Link 1] methods方法和computed计算属性，两种方式的

àì夳堔傛蜴生んèń/ 2023年02月15日 12:48/ 0 赞/ 114 阅读

相关 computed计算属性与watch监听

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的（爱笑，傻傻的）这样一个人 -------------------- 文章目录 compute

一时失言乱红尘/ 2022年12月28日 07:22/ 0 赞/ 141 阅读

相关计算属性——computed

vuex的state与vue的data都是用户存放数据的地方，如果我们将vuex的数据直接赋值给data然后再页面使用数据，那么vuex的数据发生变化视图不会更新，那么这个时候

r囧r小猫/ 2022年12月21日 03:17/ 0 赞/ 81 阅读

相关 Vue 计算属性 Computed

基础布局 <div id="example"> <p>Original message: "{ { message }}"</p> <p>Co

喜欢ヅ旅行/ 2022年12月05日 10:19/ 0 赞/ 157 阅读

相关 vue计算属性computed

computed属性计算 new Vue({ el:"", data:{ }, methods:{ }, watch:{

谁借莪１个温暖的怀抱￠/ 2022年11月29日 12:15/ 0 赞/ 144 阅读

相关计算属性computed

[vue官方文档：计算属性][vue] 计算属性和方法的区别第 1 章：计算属性的基本用法 <template> <div class="com

旧城等待，/ 2022年11月02日 00:57/ 0 赞/ 135 阅读

相关 vue-计算属性computed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

深藏阁楼爱情的钟/ 2022年07月12日 14:55/ 0 赞/ 174 阅读

相关 vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。 computed:通常用于监控自己定义的变量，这个变量

落日映苍穹つ/ 2021年12月16日 07:03/ 0 赞/ 289 阅读

相关 Vue中计算属性computed和方法的区别

Vue中计算属性computed和方法的区别计算属性conputed和设置一个方法得到的最终结果尽管是一样，的，但是区别在于：计算属性是基于它们的响应式依赖进行缓存

淩亂°似流年/ 2021年09月07日 07:32/ 0 赞/ 360 阅读