用ref也能实现,为啥说用reactive代码更简洁
尝试了下用ref也能实现,不太明白视频中老师说用reactive代码更简洁的含义是什么?
相关代码:
<template> <div class="wrap"> <div class="header"> <span class="iconfont" @click="handleBackClick"></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>
18
收起
正在回答
1回答
同学你好,分析如下:
一般ref处理的是基本数据类型,而上面的代码中非基本数据类型一般使用reactive,同学通过之前的学习可以知道这两种方式底层实现是不一样的,也可以简单理解为是规定方式,同学此处不用太过纠结。
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星