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

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

相关代码：

<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>