Vue2计算属性computed

最新推荐文章于 2023-11-22 14:28:54 发布
最新推荐文章于 2023-11-22 14:28:54 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： Vue2 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuey0809/article/details/123544919
版权

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

合法的咸鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue computed 计算属性代码实例
10-15
在本篇文章里小编给大家分享的是关于Vue computed 计算属性代码实例，需要的朋友们可以参考下。
vue计算属性computed的set没有执行
weixin_55869175的博客
05-17 4500
vue计算属性computed的set没有执行 首先我的页面一开始需要要展示从vuex拿到的数组的第一条数据，然后再在点击切换的时候，再切换成数组的其他数据。 一开始我只有 groupname1 和 grouptest计算属性，结果发现，虽然能切换，但是首先进去的第一条数据却没有展示出来，后面才发现，这是因为写在了computed的前面，computed根本还没执行呢，所以get()也没有执行。故而第一条数据出不来。 然后，我又只将groupname放到后面，把前面的 groupname1删掉了
vue2使用Set集合无法响应式踩坑.md
闪闪的小黑的博客
12-31 611
Set集合在vue2中无法进行响应式的原因及解决办法.
Vue 中修改了计算属性（computed) 或者它的依赖变量，计算属性的值没有变化的几种情况
最新发布
全栈攻略
11-22 3786
计算属性的值是由它们的函数逻辑计算得出的，而不是通过直接赋值来设置的。解决方案就是当你发现无论如何怎么修改计算属性的值都没有变化的时候，看一看data中与props中是否有根计算属性同名的变量，这时候就要考虑是要删除该变量，还是改变计算属性的命名了。如果你希望修改一个计算属性的值并使其生效，你需要通过修改计算属性所依赖的数据来触发重新计算。通过第一种情况我们知道了，要修改计算属性的值，必须要修改计算属性的依赖变量，但有一种情况及时修改了依赖变量的值，计算属性的值任然不会变化。
vuex中的辅助函数在vue2.0和vue3.0的分别使用
xwnxwn的专栏
04-10 1116
原文链接：https://blog.csdn.net/James_xyf/article/details/118636622 前言 ​ 最近自己一直在学习vue3，学习到了很多的新知识，非常的感谢coderwhy老师的指导。由于自己一直有做笔记这个习惯，学习到了vuex中的辅助函数，分别在vue2和vue3中的分别使用，以前感觉自己有必要记录下来，来对自己加深印象，巩固基础。 正题 1 、为什么要使用辅助函数 const store = new Vuex.Store({ state: { ...
vue2+ant design vue 项目开发小坑(一)——computed属性不生效
cy1502的博客
03-18 2973
写在前面： 按照标题内容搜，只能搜到计算属性和watch监听的原理，因为他压根就是生效了！但是有点小瑕疵~ 核心代码是这样的： data ({ return { projectInfo: {}, form: this.$form.createForm(this, { onValuesChange: (props, values) =>{if (values ==this.testInfo) returnobject.assign(this.testInfo, value
解决computed监听Vuex中state对象中的对象属性时不生效的问题
故里的博客
09-02 3511
       computed属性监听对象时候，若对象的引用地址未改变，那么computed将不会检测到。（比如object中的某个key对应的value发生了变化，computed检测不出来） 原写法 export default { namespaced: true, state: { shareInformation:{ other: {}//获取时为Null .
vue computed的set方法无效怎么办？
热门推荐
hua_ban_yu的博客
05-10 1万+
vue可以通过set方法将data里面的原始数据改掉，但是为啥监控发现并没有变化，而且set和get打个对调，get输出的值还是不变。原因：默认情况下computed的set方法是不会被执行，只有对重新赋值才会触发computed的set方法。解决方法：只需要对app.fullName进行赋值即可步骤：通过get、set方法对fullName进行赋值，同时在对应的get、set方法里使用conso...
关于vue Table表格合计不能自动计算的问题
mengziwudao的博客
03-20 945
使用vue table 合计出现数值不能自动计算的问题 , 研究官网发现就少了个 prop参数
computed vue 不 触发_vue中使用computed计算数据不生效
weixin_39516956的博客
12-19 7257
在计算属性中依赖于props的data数据，当data更新后，computed并没有实时去拿data数据。(本来想通过watch data的改变去实现，但是watch一直不执行，但data数据本身确实改变了，很诡异...)代码如下：props: {data: {default: () => {},type: Object,},},data() {return {};},created() {...
vue计算属性computed的使用方法示例
10-17
主要介绍了vue计算属性computed的使用方法,结合实例形式分析了vue计算属性computed的基本用法及相关操作注意事项,需要的朋友可以参考下
深入理解Vue Computed计算属性原理
08-27
Computed 计算属性是 Vue 中常用的一个功能，本篇文章主要介绍了Vue Computed 计算属性原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中计算属性computed的示例解读
08-29
计算属性和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。下面这篇文章主要给大家介绍了关于Vue中计算属性computed的相关资料，需要的朋友可以参考下。
Vue computed计算属性的使用方法
08-29
主要为大家详细介绍了Vue computed计算属性的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue computed的set也有用处喔
m0_61093442的博客
12-04 1220
一个computed的用法demo
Vue计算属性computed的get和set方法
CC酱写前端的博客
09-28 9140
vue中computed为计算属性，计算属性是一种带有行为的属性，本质上是方法，但是不能调用。 而需要重新渲染时使用methods中的方法会重复调用执行函数，若函数复杂，浏览器性能会降低。使用computed则会缓存计算结果，避免重复计算，从而提高效率。 computed中的get方法可简单理解为取值时调用此方法，而set则为重新赋值时调用。 <body> <div id="app"> {{fullName}} </div> &lt
解决vue2.0 wacth深度监听新值与旧值相同问题
tao20010624的博客
04-18 2395
<template> <div> {{Obj}} {{a}} <button @click="Obj.a=2,a=2">点击改变</button> </div> </template> <script> export default { data() { return { Obj: { a: 1, }, a: 111, .
初学Vue遇到的计算属性不刷新的问题
u012745755的博客
08-05 1万+
项目场景： Vuex中定义了一个列表，在组件中想要读取列表数据进行展示，其中选择按钮的是否选中取决去对象中的check属性 问题描述： 组件内动态绑定class，采用了计算属性去返回true或者flase，添加点击事件，当点击div时对Vuex中对应的布尔值取反。但实际运行只有第一次加载页面时能正常显示，之后无法正常切换，在点击事件中打印CartList[index].check却能正常切换true，flase 后来将计算属性依赖于data时点击可以正常切换，通过搜索了解到计算属性是依赖于da...
快速理解Vue 使用 vm.$set 解决对象新增属性不能响应的问题
xiaoxiaofly的博客
08-16 1397
Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？ Vue 源码 export function set (target: Array&l
vue computed计算属性
08-16
Vue的computed计算属性是一种方便的方式来处理数据的依赖关系。它可以根据其他属性的值来动态计算出一个新的值，并且会自动缓存计算结果，只有当相关属性发生变化时才会重新计算。 在Vue组件中，你可以通过在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

合法的咸鱼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值