Vue2计算属性computed

最新推荐文章于 2025-06-29 14:52:39 发布
最新推荐文章于 2025-06-29 14:52:39 发布
阅读量2.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue2 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yuey0809/article/details/123544919
Vue实例创建后，beforeCreate阶段会处理computed属性，为每个属性创建watcher，并收集依赖。getter运行时会收集自身及组件的watcher。由于lazy特性，计算属性的watcher不会立即执行，只有在读取时才会根据dirty标志决定是否重新计算。当依赖变化时，只触发计算属性的watcher更新dirty标志，读取时再进行计算。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue实例被创建,在触发beforeCreate之后,会做一些事情,其中就包括对computed的梳理

处理

vue会遍历computed配置的所有属性,为每一个属性创建一个watcher,并传入一个函数,传入的函数本质就是computed配置中的getter,这样一来,getter运行过程中就会收集依赖

在收集依赖的时候,不光会收集这个watcher,还会收集组件的watcher

为计算属性创建的watcher不会立即执行,是因为考虑到该属性是否被使用,如果没被使用,则不会执行,因此在创建watcher的时候使用了lazy属性

lazy属性可以使watcher不会立即执行,并且watcher内部会创建两个属性来实现缓存,value:保存watcher运行的结果,受lazy的影响最开始是undefined,dirty: 用于描述value是否为脏值,受lazy影响最开始为true

当读取计算属性时,vue会检查对应的watcher是否为脏值,如果是则运行函数,计算依赖,得到对应的值,保存在watcher的value中,并设置dirty为false,然后返回

当计算属性依赖发生变化的时候,只会触发计算属性的watcher,将dirty设置为true,当运行组件的watcher的时候会判断dirty,如果是脏值,则会重新计算,得到对应的值,保存在watcher的value中,并设置dirty为false,然后返回

setter

对于computed的setter,watcher设置监听时会直接调用computed的setter

vue2中 computed 计算属性
qq_74114417的博客
02-13 2368
在 Vue 2 中，computed 计算属性是组件中非常重要的一部分，它允许我们基于现有数据派生出新的数据，并且具有缓存机制，能够提高应用的性能和响应速度。本文将详细介绍 computed 计算属性的用法、特点以及实际应用案例。
Vue计算属性computed
I am the light coursing in the soul of the moon.
08-20 1063
计算属性就是基于现有的数据推算出来的新属性，只要依赖的数据变化，新属性就会自动更新而且计算属性多次调用的情况下只会计算一次，效率非常高。
vue2 computed set与get函数
weixin_30586085的博客
04-10 227
大家都知道computed简单的使用方法，这儿只分享一下setter和getter用法： setter：设置值时触发。 getter：获取值时触发，与setter是没有必然联系的。 <template > <div> <button @click='fn'>设置</button> //点击后fn函数执行。 <...
vue2 第三节 计算属性_侦听器 watch_生命周期
weixin_62613321的博客
06-29 663
本文介绍了Vue.js中三个重要概念：计算属性、侦听器和生命周期。计算属性是基于现有数据计算得到的新属性，具有缓存功能，比方法更高效；侦听器watch用于监视数据变化，分为简单写法（监视单个数据）和完整写法（支持深度监听和立即执行）；生命周期包括创建阶段（响应式数据准备）和挂载阶段（DOM操作），重点介绍了created和mounted两个关键钩子函数。文章通过代码示例展示了计算属性的基本用法、完整写法以及侦听器的应用场景。
vue2的computed
我的博客简介
12-07 7673
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
Vue Computed中get 和set讲解
热门推荐
zhumizhumi的博客
05-23 5万+
没有点击点击事件之前，页面的输出：可以看到，在没有进行任何操作之前getter就会自动执行，页面中的fullName已经改变。只有当computed监测的值变化的时候，也就是我下面例子中的fullName变化的时候，set才回被调用。点击过点击事件之后，调用乐set，便可以进行操作了。上面的点击事件，改变fullName的值。
Vue2之set方法和计算属性computed
m0_72694993的博客
09-06 2287
1.我们介绍计算属性之前我们先看一下这个例子，我们想把msg属性的内容反转输出，我们可以通过msg.split("").reverse().join("");2. 这个时候我们可以用到vue的方法set,用法如下，第一个参数是我们要修改的数组，第二个参数是我们要修改的数据的索引，第三个参数是我们要修改为的值；1.我们运行以下代码的时候，本意想点击click按钮进行修改数组中索引为0的元素，但是我们运行之后点击以后并不能修改，这是因为vue不允许直接用索引的方式直接修改data中数组的值。
vue-async-computed：Vue.js的异步计算属性
02-06
使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
Vue中计算属性computed的示例解读
08-29
Vue.js 是一款流行的前端框架，它提供了一种强大的机制来处理数据的动态计算，这就是计算属性（computed）。计算属性在Vue实例中定义，允许我们基于已有数据进行复杂计算，并自动响应依赖数据的变化。 计算属性的...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
以上内容详细介绍了Vue计算属性(computed)、方法(methods)、监听器(watch)的使用方法和区别，并通过实例展示了它们在实际开发中的应用。理解这些知识点对于提升Vue.js开发效率和代码质量具有重要意义。
深入理解Vue Computed计算属性原理
08-27
深入理解Vue Computed计算属性原理 Computed 计算属性是 Vue 中常用的一个功能，它可以自动地计算并缓存依赖项的值，以便提高应用程序的性能。下面将深入探讨 Vue Computed 计算属性的原理，了解它是如何工作的。 ...
Vue 2.0学习笔记之Vue中的computed属性
08-29
本篇文章主要介绍了Vue 2.0学习笔记之Vue中的computed属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue2的计算属性---computed
facker_Lap的博客
10-02 1330
值得注意的是，computed为属性，所以在{{ }}中使用它的类名时，不需要在最后加(),如{{totalNumber}}，但在使用methods方法中的函数时，则需要在{{ }}的最后加()，如{{totalNumber()}}；我们改变代码块中的num值时，用户页面的总计值也会改变，当然，在用户页面按F12打开浏览器的开发者工具，在开发者工具中改变num的值，我们可以更直观的看到computed的作用。计算属性，顾名思义可以自动计算表单或其他的总值，如下以计算表单的总计为例，先看代码块。
Vue2-响应式系统之computed
qq_39173779的博客
03-11 3589
Vue2-响应式系统之computed
vue 中的 computed 的 set
qq_40774743的博客
11-19 7007
先看代码 computed: { fullName: { // getter get: function() { return this.firstName + ' ' + this.lastName }, // setter set: function(newValue) { console.log('9999'); var names = newValue.split(' ') this.firstName = names[0] } } }, 解释：代码中，fullName
vue2：computed计算属性
qq_38969618的博客
10-13 1906
【代码】computed计算属性。
vue2计算属性内的get/set解析
weixin_41993525的博客
04-13 1654
在计算属性内，get/set字面意思是获取和设置操作，计算属性值根据依赖变量的值在get内return，set则是值改变时需要执行的区域。常规的computed写法，如果b变量在某个地方被更改的话，会报错。
Vue2中Computed简单讲解以及实现
weixin_38992765的博客
12-08 6607
Computed 简单讲解 上一回说了Vue的第二种watch也就是$Watch 接下来讲讲第三种 wachter也就是 computed(计算属性) 计算属性的特点 调用后执行 依赖的数据改变会重新计算 具有缓存性 调用后执行，调用后执行，我们可以想想我们定义data的时候，一样是调用后执行，所以我们联想到老朋友 Object.defineProperty(target, key, sharedPropertyDefinition) 而且依赖的数据发生改变，我们可以想象到我们可以在每个依赖的数
Vue2 与 Vue3 中 Computed 计算属性详解
m0_57836225的博客
10-04 1610
无论是 Vue2 还是 Vue3，计算属性都是一个非常强大的特性，可以帮助我们简化代码，提高开发效率。计算属性是基于它们的响应式依赖进行缓存的，只有在它们的依赖发生变化时才会重新计算。在 Vue2 和 Vue3 中，默认情况下计算属性是只读的，如果想要修改计算属性的值，需要使用get和set的写法。在面试中，可能会问到关于计算属性的问题，例如计算属性的结果值可以修改吗？答案是可以的，但需要通过特定的写法。
vue computed 计算属性
最新发布
07-02
在 Vue.js 中，`computed` 计算属性是一个非常重要的概念。它允许我们声明**依赖响应式数据的属性**，这些属性会根据其依赖的数据自动更新。与 `methods` 不同的是，`computed` 属性是基于它们的响应式依赖进行缓存的，只有当依赖的数据发生变化时才会重新计算。 以下是一个简单的示例，展示如何使用 `computed`： ```html <!DOCTYPE html> <html> <head> <title>Vue Computed Example</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <p>原始消息: "{{ message }}"</p> <p>反转后的消息: "{{ reversedMessage }}"</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' }, computed: { // 计算属性 reversedMessage: function () { return this.message.split('').reverse().join(''); } } }); </script> </body> </html> ``` ### 解释： 1. **data**: 定义了响应式数据 `message`。 2. **computed**: 定义了一个计算属性 `reversedMessage`，它依赖于 `message` 数据。 - 当 `message` 发生变化时，`reversedMessage` 会自动重新计算。 - 因为计算属性是缓存的，如果多次调用 `reversedMessage` 而 `message` 没有改变，则会直接返回缓存的结果。 3. 在模板中，`{{ reversedMessage }}` 会显示 `message` 的反转字符串。 ### 优点： - **性能优化**：因为计算属性是缓存的，避免了重复执行相同的逻辑。 - **代码清晰**：将复杂的逻辑封装到计算属性中，使模板更简洁。 --- ### 使用 `computed` vs `methods`： | 特性 | `computed` | `methods` | |------|------------|-----------| | 是否缓存结果 | ✅ 是（基于依赖） | ❌ 否（每次都会调用） | | 适用场景 | 基于现有响应式数据的复杂计算 | 需要每次调用都执行的逻辑 | --- ### 相关问题：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

合法的咸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值