1. 过渡动画 vue中过渡的知识点： 参考 https://blog.csdn.net/weixin_44482737/article/details/126192726
文章图片
文章图片
文章图片
文章图片
文章图片
2. 商品分类列表的优化 
文章图片
文章图片
项目：home切换到search或者search切换到home，会发现一件事情，就是组件在频繁的向服务器发请求，来获取三级联动的数据进行展示。
项目中如果频繁的向服务器发请求，很耗性能的，因此需要进行优化。
原因：为什么会频繁的向服务器发请求获取三级联动的数据那?
回答：因为路由跳转的时候，组件会进行销毁的【home组件的created：在向vuex派发action，因此频繁的获取三级联动的数据】只需要发一次请求，获取到三级联动的数据即可，不需要多次。
最终解决方案：在App.vue中发送请求即可
3. 参数合并 
文章图片
文章图片
4. mockjs模拟数据 Mockjs: 用来拦截ajax请求, 生成随机数据返回
- 在项目当中src文件夹中创建mock文件夹
文章图片
- 第二步准备JSON数据(mock 文件夹中创建相应的JSON文件) ，进行格式化，不要留有空格(跑不起来的)
文章图片
- 把mock数据需要的图片放置到public文件夹中（public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹）
文章图片
- 创建mockSerer . js通过mockj s插件实现模拟数据
文章图片
- mockServer. js文件在入口文件中引入(至少需要执行一次，才能模拟数据) 不然等于没用
mockServe当成一个本地服务器，然后这个mockServe就是服务器的入口文件，只需要运行一下就是启动了，入口文件则不用暴露
文章图片
- 在API文件夹中创建mockRequest (axios实例：baseURL:‘/mock’),专门获取模拟数据用的axios实例。
文章图片
在api中的index.js中配置mockjs数据的接口
文章图片
- 在轮播图组件（listContainer）中派发action , vuex三件套
文章图片
actions
文章图片
mutations 和 state
文章图片
- 放置在组件中
文章图片
- :swiper在Vue项目中使用 （swiper实例必须在结构完整出现后才能实例化）
1.swiper安装到项目当中 npm i swiper@5
2.在相应的组件引入 swiper.js || swiper.css
3.但是需要注意，home模块很多组件都使用到swiper.css,没必要在每一个组件内部都引入样式一次，只需要在入口文件引入一次即可。
main.js中引入
文章图片
组件中导入包（listContainer）
文章图片
- 重点
1）初始化swiper实例在哪里书写?
初始化swiper实例之前，页面中的节点（结构）务必要有，
对于Vue一个组件而言，首先会想到mounted（组件挂载完毕：相应的结构不就有了吗）
mounted–>组件挂载完毕
Swiper需要获取到轮播图的节点DOM，才能给swiper轮播添加动态效果，因为没有获取到节点。
那是因为dispatch涉及到异步的操作，导致v-for遍历的时候结构还没有完全，因此在mounted中发送请求了之后，还没获得轮播图的数据，swiper就开始初始化了。
文章图片
3）第一种解决方案，延迟器（不是完美的解决方案）
created里面：created执行与mounted执行，时间差可能2ms，白扯
updated里面：如果组件有很多响应式（data），只要有一个属性值发生变化updated还会再次执行，再次初始化实例。
mounted() {
//派发action：通过Vuex发起ajax请求，把数据仓储在仓库中
this.$store.dispatch("getBannerList");
//在new Swiper实例之前，页面的结构必须要有，如果没实现，应该是结构不完整
//因为dispatch当中涉及到异步语句，导致v-for遍历的时候结构还没有完整 因此不行
setTimeout(() => {
var mySwiper = new Swiper(".swiper-container", {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable:true //点击小球也切换图片
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
},1000);
},
总结：第一种解决方案可以通过延迟器（异步）去解决问题，
但是这种解决方案存在风险（无法确定用户请求到底需要多长时间），因此没办法确定延迟器时间。
4）Swiper在Vue项目中使用完美解决方案
a.第一种解决方案问题出现在哪里：v-for,在遍历来自于Vuex（数据:通过ajax向服务器发请求，存在异步）
b. watch:监听属性，watch可以检测到属性值的变化，当属性值发生变化的时候，可以触发一次。
c. Vuex当中的仓库数据bannerList（组件在使用）：
问：bannerList仓库数据有没有发生过变化？
答：一定是有的：bannerList初始值空数组，当服务器的数据返回以后，它的bannerList存储的属性值会发生变化（变为服务器返回的数据）
组件实例在使用仓库中的bannerList，组件的这个属性bannerList一定是发生过变化，watch可以监听到。
【vue|Vue项目的记录（四）】nextTick解释:
在下次DOM更新, 循环结束之后,执行延迟回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM。
注意：组件实例的$nextTick方法，在工作当中经常使用，经常结合第三方插件使用，获取更新后的DOM节点
文章图片
推荐阅读
- axios|axios基本的使用
- vue|Vue项目的记录（三）
- vue|vue3.0 + element-plus + 上传图片到七牛云
- 区块链探索|[Near Protocol] Near开发Demo浅析-Gamble Game Near（二）（Dapp）
- 前端知识|Vue指令综合案例——汽车品牌管理
- vue|vue网络请求
- vue.js|为什么Vue（默认情况下）比React性能更好
- Vue|Vue组件详解
- Vue|Vue混入与插件