关于reactive和ref的使用

关于reactive和ref的使用

问题描述:

像从后台获取的商品信息,是存放在数组中的,课程中用的是reactive,但在contentList外面还包裹一层data。我发现在声明响应式变量时,如果去除外层的data,直接用conteneList的话,需要使用数组的相关方法才能给contentList重新赋值的(否则页面数据不会改变),那这种情况可以用ref来声明吗?


相关截图:

https://img1.sycdn.imooc.com//climg/618745da0911c8ad10760505.jpg

下载视频          

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

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

1回答
好帮手慕然然 2021-11-07 11:43:04

同学你好,ref 用于处理基础类型的数据(如:字符串类型、数值类型),reactive 用于处理非基础类型的数据(如:对象{},数组[]),根据同学的说法,只要conteneList中存放的是一个数组类型的数据,那么就要使用reactive创建响应式数据,而不建议使用ref,与外层的data无关,如图

https://img1.sycdn.imooc.com//climg/61874b2609bb756f07590195.jpg

祝学习愉快!

  • 提问者 hwjhuvbj #1

    但是使用起来感觉不习惯,比如要更新整个数组,使用reactive如图

    https://img1.sycdn.imooc.com//climg/6187527d0929ebac06310484.jpg

    使用ref, 如图

    https://img1.sycdn.imooc.com//climg/618752ee095f5ec305590207.jpg

    下载视频          
    2021-11-07 12:15:49
  • 提问者 hwjhuvbj #2

    vue官方的示例代码中,也有用ref去声明数组的

    https://img1.sycdn.imooc.com//climg/618754a6090b81d807640405.jpg

    所以我在想,这类从后台获取的、仅供*显示*的数据是否用ref去声明后,在使用上来说会简单一些。

    下载视频          
    2021-11-07 12:24:50
  • 好帮手慕然然 回复 提问者 hwjhuvbj #3

    同学你好,老师理解同学说的意思了,按照同学的写法,如果直接定义数组不定义对象的话,确实使用ref要简单一些,实现起来没有问题。另外,纠正一下,前面老师说的有点绝对了,基础数据类型和非基础数据类型都是可以使用ref来进行定义,不过一般定义对象建议使用reactive,通过 reactive 函数可以使该对象具有高度的响应式。祝学习愉快!

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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