computed里面的问题

computed里面的问题

http://img1.sycdn.imooc.com//climg/61128178090d2bcb37501940.jpg

carlist里面的count 发生也没有重新触发computed 

这里computed不是很明白什么意思


补充代码:

<template>

<div>购物车数量:{{ total }}</div>

<!-- <div>购物车统计:0</div>  -->

</template>

<script>

import { useStore } from "vuex";

import { computed } from "vue";

export default {

setup() {


const store = useStore();

const cartList = store.state.cartList;

console.log("从state拿的数据是proxy::::", cartList);

//假设shopid=1

const total = computed(() => {

console.log("carlist1:::",cartList[1]);

const productList = cartList[1];

console.log(123);

return productList; //返回的东西必须包含外部动态变化的数据

});


return { total }; //计算属性是不用拆解proxy返回出去的

},

};

</script>

<style scoped>

</style>


正在回答

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

1回答

同学你好,解答如下:

computed监听对象时,如果对象的引用地址未改变,那么computed方法中的代码可能会无法执行。初始时,

cartList是undefined,此时会执行computed中的代码,打印一个123;点击一次按钮后,cartList不再是undefined,而变成了一个对象,数据类型改变了,所以会执行computed里面的代码,打印一个123;再次点击按钮,由于cartList的地址没有改变(只是属性变了),所以监听会有问题,页面数据会跟着联动,但是不会再打印123,因此打印结果不对应。

可以考虑换成watch,利用watch方法实现深度监听,监听对象的属性,如果属性改变也执行方法中的代码:

http://img1.sycdn.imooc.com//climg/611344b10932c8f506520110.jpg

http://img1.sycdn.imooc.com//climg/611344e009f1cae507530532.jpg

http://img1.sycdn.imooc.com//climg/611344ee099befbb08950244.jpg

祝学习愉快!​


  • 老司鸭 提问者 #1

    http://img1.sycdn.imooc.com//climg/6116324009f480c416961128.jpg

    第一次的comnputed 是在哪里触发出来的? 就是carlist的第一次动态变化 undifined

    2021-08-13 16:51:03
  • 老司鸭 提问者 #2

    点击添加购物车的时候 carlist发生变化 才会触发 computed  第一次我没有操作carlist任何内容  他也触发了compunted是啥

    2021-08-13 16:55:05
  • 老司鸭 提问者 #3

    http://img1.sycdn.imooc.com//climg/6116352209f3e98614781124.jpg如果说我没有操作carlist也执行computed 此时catlistl是空对象{} 后面这块代码不是在执行的时候也会报错吗

    2021-08-13 17:04:07
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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