老师请问这个computed依赖的哪一个值呀?

老师请问这个computed依赖的哪一个值呀?

http://img1.sycdn.imooc.com//climg/60c0e9f30999c86a09500539.jpg

当我把productList 从computed里面拿出来时,computed就不执行了。(因为当时自己思路写的) 如果是作用域链向外查找应该是能找到productList才对。然后 当我想在computed里面console.log()看看computed执没执行时,就是图上那样,结果功能就可以正常使用了。 这里不是很明白。


老师还有一个问题

http://img1.sycdn.imooc.com//climg/60c0eb2809ab15b811080404.jpg

当我for里面使用let 时,会提示我使用const 常量。 这里是不是bug了? 


还是有点不理解这个computed

这几节课感觉有些难,所以问的有点频繁,希望老师不要嫌烦,感谢老师


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕久久 2021-06-10 14:25:50

同学你好,理解的不是特别正确。将productList = cartList.value[shopId]写在computed中后,由于cartList本身是响应式的(vuex的state中定义的数据是响应式的),并且参与了total的计算,所以改变cartList的时候就会触发computed,从而计算出新的total(写在里面,触发computed多次执行的是cartList):

http://img1.sycdn.imooc.com//climg/60c1ad2609f8998f06050370.jpg

即点击加减号改变cartList的值的时候,由于计算属性total会受到cartList的影响,所以会触发计算属性computed;而只要触发computed,就会重新计算productList,此时与productList是不是响应式没啥关系。

而写在外面时,与total(count)有关的数据只剩下了productList,而productList不是响应式,所以无法多次触发computed

http://img1.sycdn.imooc.com//climg/60c1af85091d4c0107040561.jpg

祝学习愉快!

好帮手慕久久 2021-06-10 12:06:13

同学你好,解答如下:

1、computed依赖的数据要满足两个条件,一是参与了计算,二是响应式。可以参考如下例子:

例一:

http://img1.sycdn.imooc.com//climg/60c1886009bd39c008940798.jpg

该例子中,点击按钮时,会触发click事件;在click事件中,会让a加2,而计算属性countAddFive的值是利用a得到的:

http://img1.sycdn.imooc.com//climg/60c1884a097006a108120803.jpg

http://img1.sycdn.imooc.com//climg/60c189c509d4019f05570162.jpg

由于a不是响应式数据,所以它不是计算属性countAddFive的依赖;改变a,不会多次触发computed:

http://img1.sycdn.imooc.com//climg/60c189880a97ab5310270201.jpg

例二:

http://img1.sycdn.imooc.com//climg/60c18a92095cb7a009970712.jpg

该例子中,打印了响应式数据countObj,但是它并没有参与计算,即computed中返回的值与它没关系,此时改变countObj也不会触发计算属性:

http://img1.sycdn.imooc.com//climg/60c18abd0a5a1f5c10270319.jpg

例三:

http://img1.sycdn.imooc.com//climg/60c18b2f094fb0f809910797.jpg

该例子中,计算属性countAddFive的值,是由响应式数据countObj决定的:

http://img1.sycdn.imooc.com//climg/60c18b8d0956072f06250439.jpg

此时改变countObj会触发计算属性:

http://img1.sycdn.imooc.com//climg/60c18bef0a43ccc610270319.jpg

同学将const productList=cartList.value[shopId]写在computed外面时,由于初始时,vuex的state中cartList没有数据:

http://img1.sycdn.imooc.com//climg/60c18cd60985befa07500630.jpg

所以获取到的productList是undefined:

http://img1.sycdn.imooc.com//climg/60c18d060930549209300166.jpg

undefined不是响应式数据,所以不会多次触发computed:

http://img1.sycdn.imooc.com//climg/60c18d340902462307550574.jpg

而写在里面,相当于cartList参与了计算,而cartList是响应式,所以可以多次触发computed:

http://img1.sycdn.imooc.com//climg/60c18d7609d07d2906830566.jpg

2、for in在遍历对象时,每遍历一次都会生成一个块级作用域,并在作用域中声明一个i(i处于不同的作用域中);实际上在每个块级作用域内i并没有被修改,所以编辑器提示可以使用const定义i。这里不是bug,只是一个语法上的建议。

祝学习愉快!

  • 提问者 帅得无心敲代码 #1

    老师 也就是说。 

    productList = cartList.value[shopId]

    放在computed 里,相当于点击按钮触发count的时候由于依赖的值更新computed就会触发,这个时候productList就正好已经构建好数据结构了,也就是有值了,就不会是undefined,自然也是一个响应式了。computed 也能正常运算了。是这样吗? 老师

    2021-06-10 13:54:33
  • easyschen 回复 提问者 帅得无心敲代码 #2

    做个笔记:

    https://class.imooc.com/course/qadetail/326913


    computed中的依赖项有shopId,从这点考虑,代码会执行computed。


    https://img1.sycdn.imooc.com//climg/62a163bf09beb85815240872.jpg


    2022-06-09 11:07:31
帅得无心敲代码 提问者 2021-06-10 02:27:55

老师,我这里只是想在计算属性里面写计算的逻辑,比如在计算属性里只写运算,像赋值什么的我都写在计算属性外面,就像我截图的这个一样,不知道为什么不行

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师