用ref也能实现,为啥说用reactive代码更简洁

用ref也能实现,为啥说用reactive代码更简洁

尝试了下用ref也能实现,不太明白视频中老师说用reactive代码更简洁的含义是什么?

https://img1.sycdn.imooc.com//climg/64130f250995aecd12681204.jpg

相关代码:

<template>
<div class="wrap">
<div class="header">
<span class="iconfont" @click="handleBackClick">&#xe645;</span>
<div class="searchbox">
<Search placeholder="请输入商品名称搜索" />
</div>
</div>
<ShopInfo :item="item" :ifBorder= "false" />
</div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { get } from '../../utils/request'
import ShopInfo from '../../components/ShopInfo.vue'
import Search from '../../components/Search.vue'
import { ref } from 'vue'
// 返回上一页
const backEffect = () => {
const router = useRouter()
const handleBackClick = () => {
router.back()
}
return { handleBackClick }
}

// 获取当前商铺信息

const useShopInfoEffect = () => {
const route = useRoute()
const item = ref('')
const getItemData = async () => {
const result = await get(`/api/shop/${route.params.id}`)
if (result?.errno === 0 && result?.data) {
item.value = result.data
}
}
console.log(route)
return { item, getItemData }
}

export default {
name: 'Shop',
components: { ShopInfo, Search },

setup () {
const { handleBackClick } = backEffect()
const { item, getItemData } = useShopInfoEffect()
getItemData()

// const item = {
//     _id: '1',
//     name: '沃尔玛',
//     imgUrl: 'http://www.dell-lee.com/imgs/vue3/near.png',
//     sales: 10000,
//     expressLimit: 0,
//     expressPrice: 5,
//     slogan: 'VIP尊享满89元减4元运费券'
// }
return { item, handleBackClick }
}
}
</script>
<style lang="scss" scoped>
.wrap{
padding: 0 .18rem;
}
.header{
display: flex;
padding:.16rem 0;
// background: grey;
.iconfont{
color:#aaa;
font-size:.24rem;
line-height: .32rem;
width: .3rem;
}
.searchbox{
flex-grow: 1;
}
}
</style>


正在回答

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

1回答

同学你好,分析如下:

一般ref处理的是基本数据类型,而上面的代码中非基本数据类型一般使用reactive,同学通过之前的学习可以知道这两种方式底层实现是不一样的,也可以简单理解为是规定方式,同学此处不用太过纠结。

祝学习愉快~

  • 慕粉1234567890123 提问者 #1

    我知道ref和reactive的区别,我只是不理解老师为什么这里说reactive会让代码更简洁。难道只是老师随口一说?

    2023-03-17 10:09:29
  • 慕粉1234567890123 提问者 #2

    如果你看过视频,你就会知道老师在视频中说reactive比ref更简洁,至于为什么,他让我们自己去尝试一下用ref。然后我就按他说的做了,结果更加困惑了。在此场景下,ref不是比reactive更简单么?

    2023-03-17 10:10:59
  • 首先因为接口中的数据是一个对象(非基础类型的数据)那么看到对象转响应式,vue官方更建议或者说要求让我们使用reactive这是其一。

    第二那么这里为什么ref要比reactive麻烦呢,如下:

    这里要说一下,ref在目前可以用来转换对象,所以这里同学还是可以使用ref进行实现,但是同学发现了没有使用ref需要使用.value的方式进行使用,那么后期在使用的时候,也有可能会考虑到是不是要加上.value在进行访问。这一块是比较繁琐的。

    第三老师这句话的意思还有一些带着其原理的方式说的,这里因为课程中确实没有提到,如果使用ref去使用转换响应式的话,实际上其底层还是要依赖于reactive去做的,与其说本身reactive能直接解决问题,那还用ref干啥。这不就麻烦了么。对不~

    2023-03-17 10:31:52
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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