【学习打卡】第10天 【2022版】Vue3 系统入门与项目实战第十讲

课程名称： 2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节： 商家展示功能开发（上）

主讲老师： Dell

课程内容：

今天学习的内容包括：
页面接收数据如果是引用数据类型（对象或数组）时，建议使用 reactive 包装

课程收获：

10.1 心得：

可选链操作符提供了一种方法来简化被连接对象的值访问，在一定程度上简化了写法

let obj = {
   children:{
      name:"李四"
  }
}
// 这么写没毛病，但是假如obj.children为null或undefined呢？
obj.children.name;
// 一般我们这么来避免
if(obj.children)(
  // ...
}

// --------------------分割线---------------------------------

// 接着上面那个问题，那再次假如obj.children.name为null或undefined呢？
// 一般来这么写
if(obj.children && obj.children.name){
 // ...
}

// --------------------分割线---------------------------------

// 以上的写法就显得有点冗余了，试试可选链写法吧：
// 当obj.children为undefined或null的时候,这时候访问会被截断，且不会继续访问obj.children.name
if(obj.children?.name){ // 同等 if(obj.children && obj.children.name){} 
// ...
}

reactive 接收数据建议使用const nearbyList = reactive({ list:[] })

setup(){

const nearbyList = reactive({ list:[] })

const getNearbyList - async ()=>{

const result-await axios.get("https://www.fastmock.com")

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

nearbylist.list-result.data.data 

console.log(result,data,data)

console.log(nearbyList.list) 

}

getNearbyList()

console.log(nearbyList.list)

const {list}-toRefs(nearbyList) 

console.log(list)

return{list} 

}

10.2/3 心得：

组件中样式的动态切换：根据父组件传入值的不同显示/隐藏样式

父组件：

<div>

<ShopInfo

	v-for="item in list" 

	:key="item._id" tem="item 

	:item	="item"

	:hasBorderBottom="true" 

 />

</div>

<ShopInfo

:item="item"

:hasBorderBottom="false" 

/>

子组件：

props:["item","hasBorderBottom"] 

<div

	class="nearby_content"

	:class="{'nearby_content--hasBorderBottom':hasBorderBottom?true: false}"

/>

10.6/10.7 心得：

router 和 route 的区别：
router 获取的是整个路由，通常用于页面跳转；route 获取的是某一个路由，通常用于获取路由参数

import { useRouter,useRoute } from "vue-router" 

export default {

setup(){

const router = useRouter() 

const route = useRoute() 

console.log(route.params.id) 

}

当网速不好导致图片无法很快加载出来的时候，图片会先变成裂图，解决这个问题的方法是使用 v-show 或 v-if 判断是否有图片，当有图片的时候再展示

<ShopInfo

:item="item"

:hasBorderBottom="false" 

/>

10.13 心得：

点击高亮显示，其他取消高亮：
用点击的tab值和每一个tab值对比，一样的话则当前tab值高亮显示

<div

class="category_item"

:class="['category__item--active': currentTab === item.tab)" 

v-for="item in categoryList"

:key="item.id"

@click="() => handleCategoryClick(item.tab)"

>

{{item.name}}

</div>

函数传值写法：

const handleCategoryClick=(tab)=>{ 

	console.log(tab)

}

10.14 心得：

当其他模块需要用本模块里面的函数时，我们无法将本模块的函数导出让别的模块使用，这时候我们可以这样做：

1.将别的模块的参数导出出来，然后本模块接收。

2.当别的模块参数变化时，说明需要调用本模块的函数，这时候我们可以通过使用 watchEffect 巧妙的实现这个需求。因为 watchEffect 的作用就是监听，在页面加载进来的时候就开始监听，然后内部检测到依赖代码有变化了重新执行内部代码

watchEffect 内部监听了currentTab 的值，所以当 currentTab 的值发生变化的时候，watchEffect 就可以监听到然后执行 getContentData 函数，而且 watchEffect 还有一个好处是页面第一次加载进来的时候就会执行一次，让页面获取了数据展示出来

const usecontentEffect=(currontTat)=>{

const route-useRouto() 

const data·reactive({ 

contentList:[] ({

const getContentData·async()=>(

const result=await axios.get(shop/$(route.parans.id)/products?tab=$currentTab.value 		 			 if(result).data7.errno==0)(

data.contentList-result.data.data 

watchEffect(()=>(

getContentData() 

})

const(contentList}=toRefs(data) 

return{contentlist)

}