老师关于为什么这里也要使用computed

老师关于为什么这里也要使用computed

老师这段代码为什么也要使用computed没有明白,里面没有涉及到计算啊,为什么也能够不断的重新渲染,并且为什么watchEffect不可以

const productList = computed(() => {

const productList = cartList[shopId] || [];

return productList;

});


正在回答

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

2回答

同学你好,对于你的问题解答如下:

1、可以这样理解

2、可以在某些情况下显式调用以停止侦听,实际中使用的较少,老师举一个简单的示例,同学了解下即可。如下:

代码中添加watchEffect侦听响应式数据age的变化:

http://img1.sycdn.imooc.com//climg/612b51df09e0ef4205930509.jpg

由于使用定时器每隔一秒将age的值加一,那么每当age值发生改变时,watchEffect都可以侦听到,输出对应的age值,示例:

http://img1.sycdn.imooc.com//climg/612b52260973cfa211730374.jpg

但是如果手动调用watchEffect方法返回的函数,即:示例代码中的stop函数,那么就可以停止侦听,当age值发生改变时,watchEffect不再侦听,也就不会输出age值,示例:

http://img1.sycdn.imooc.com//climg/612b52b709666ec906020487.jpg

http://img1.sycdn.imooc.com//climg/612b52fe09c37a3612390360.jpg

祝学习愉快~


好帮手慕慕子 2021-08-29 15:30:32

同学你好,对于你的问题解答如下:

1、因为shopId是会改变的,所以使用computed设置productList,可以依据shopId的变化重新计算值。

2、因为watchEffect是用来监听数据的,默认返回的是一个函数,返回的函数作用是可以在某些情况下显式调用以停止侦听。可以输出查看下:

http://img1.sycdn.imooc.com//climg/612b374f09e5891506180268.jpg

http://img1.sycdn.imooc.com//climg/612b3762091c7d4209910346.jpg

祝学习愉快~

  • 提问者 weixin_慕丝2377090 #1

    1: 老师是不是computed和watchEffect都可以监听到数据的变化,computed里面要包的是个变量,计算和观察它随着依赖数据的变化。而watchEffect里面是一个方法,观察它随着依赖数据的变化。


    2: 老师“返回的是一个函数,返回的函数作用是可以在某些情况下显式调用以停止侦听”,是什么意思啊?比如这里面,我知道会被自动调用,但“在某些情况下显式调用以停止侦听”没有理解。

    const getContentData = async () => {

    const result = await get(`/api/shop/${shopId}/products`, {

    tab: currentTab.value,

    });

    if (result?.errno === 0 && result?.data) {

    content.list = result.data;

    }

    };


    // 当首次页面加载的时候,或者方法所依赖的数据变化的时候执行

    watchEffect(() => {

    getContentData();

    });




    2021-08-29 16:01:57
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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