vue 进阶之路1，温故知新，组件的拆分， props之validator()验证，下拉刷新预设，组件通信篇，before+proxy+easy-mock，动态路由思路

本文链接：https://blog.youkuaiyun.com/qq_40196738/article/details/99675012

本文深入探讨前端开发中的关键技术和实践，包括Vue组件通信、异步数据处理、axios异常管理及多级动态路由跳转等核心内容，同时分享了组件化管理、业务组件与基础组件的结合、以及响应式数据管理等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、温故知新

1、path: ‘*’ // 定位不存在的路由
2、v-if="$slot.left" // 若name为left的插槽为空。
3、相邻兄弟选择器

.nav-left {
	margin-left: 10px;
	~ .nav-right {
		position: static;
	}
}

4、幻灯片自身属于基础组件(base)，页面组件(page)中引入业务组件(Slider.vue)，而Slider.vue中再引入基础组件vue-awesomes-swiper。
5、基础组件，不能携带业务逻辑。（比如写死a链接的跳转），采用插槽书写。
6、props传参验证

props: {
	direction: {
		type: String,
		default: 'horizontal',
		validator(value) {
			return ['horizontal', 'vertical'].includes(value);
		}
	}
}

7、data中引入本地图片，一定要require(’./bl.jpg’) 方式引入。
8、后期对基础组件进行管理应该统一配置文件

// 在指定类别的目录下创建 config.js
export default const = {
	direction: 'horizontal',
	loop: true
}
// 在业务组件中 引入
import swiperOption from./config.js
在 data中通过 direction: swiperOption.direction...

9、异步数据，注意v-if模板渲染问题。
10、axios获取数据，异常的处理。比如timeout:1000 超时1秒,可以通过catch捕获，或者手动跑错throw new Error(’’)捕获。
11、loading组件，很简单，当list数据为异步获取时，打开loading即可，即v-if的else判断
*12、data储存的数据是响应式数据，如果某数据只需渲染一次，可以在created中创建
13、多级动态路由跳转，只能用name,不能用path.

<router-link 
  :to="{name: 'home-product', params: {id: '1251021'}}">

14、下拉刷新预设

// scroll文件夹的 config.js
export const PULL_DOWN_HEIGHT= 100;
export const PULL_DOWN_TEXT_INIT = '你好像下拉了哦'
export const PULL_DOWN_TEXT_START =  '可以松开刷新了'
export const PULL_DOWN_TEXT_ING = '刷新中...'
export const PULL_DOWN_TEXT_END = '哦鸡儿开'

15、数组随机函数shuffle

let newArr = [];
let i = arr.length;

while(i--) {
	if (i !== (ranNum = Math.floor(Math.random()*arr.length))) {
		[newArr[i], arr[ranNum]] = [arr[i], newArr[ranNum]]
	}
}

16、如果是一个promise的实例，那么在then()中无论你有没有返回值，它都会默认返回一个undefined，即会触发then(),所以需要条件判断能否进入then，则如下

return getHomeData().then(data => {
	return new Promise((resolve) => {
		if (data) {
			resolve(); // 需要手动return一个带有resolve的Promise实例。
		}
	})
})

17、回调函数的初心：在调用方法时声明一个函数，在执行完毕后，返回参数并执行该函数（即回调）。

待补充…

二、进阶之路1

一、组件通信篇
1、provide与inject (祖先孙辈通信) (用于获取父辈数据)
a.非响应式
b.参考如下

https://www.jianshu.com/p/d34a7df4cd6a

2、如果需要广播通信，$parent dispatch()向上传递，与$children broadcast()向下传递
在这里插入图片描述
传递案例请自行实现，在组件1中通过按钮广播或传递 this.$emit(‘disOrBro’, msg)，在组件2中通过this.$on(‘disOrBro’, msg => {…})

注：讲到底就是 $on监听与 $emit广播的应用。（和bus总线很像,但dispatch和broadcast方法实现的是父子传递，而不涉及兄弟）

3、bus总线的实现
总线即订阅发布机制
一种常规Bus即实例化一个Vue新对象。（太浪费资源）
我们采取创建一个Bus类，来统一管理。
在这里插入图片描述
几小时怀疑人生后，死灰复燃…

组件Tree：
Tree.vue // data数据通过父亲传入。
在这里插入图片描述
Node.vue 递归此组件，生成Tree

将provide变成响应式: Vue.util.defineReactive(…)

发布订阅挖坑：

https://www.jianshu.com/p/594f018b68e7

三、进阶之路2

1、不同公司文件分层。

2、before(app){}和proxy: {} + easy-mock

module.exports = {
	lintOnSave: false,
	configureWebpack: {
		devServer: {
			before(app) {
				app.get('/api/info', (req, res) => {
					res.json({
						code: 0,
						result: {
							name: 'shoushou',
							age: 23
						}
					})
				})
			},
			proxy: {
				'/easymock': {
					target: 'https://www.easy-mock.com/mock/5d5a3a4c328102077c30f88a/example',
					changeOrigin: true,
					ws: true,
					pathRewrite: {
						'^/easymock': ''
					}
				}
			}
		}
	}
}

3、withCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，而且还要设置header(‘Access-Control-Allow-Credentials: true’);
4、后端解决跨域：

app.all('*', function(req, res, next) {
	res.header('Access-Control-Allow-Origin', '*');
	res.header('Access-Control-Allow-Headers', 'Content-Type');
	res.header('Access-Control-Allow-Methods', '*');
	res.header('Content-Type', 'application/json; charset=utf-8');
})

5、npm scripts + git hooks

cnpm i husky lint-staged -D

安装完即已使用，husky会改写 .git/hook/pre-commit文件。

6、前后端肯定要分离。
默认定义不需要权限的路由（登录页、首页）
权限路由由addRoutes动态添加（个人中心，购物车）。
1、初始化只有公用页面。
2、用户登录后，获取当前用户的权限数据，里面包含路由数据。
3、调用router.addRoutes添加动态的路由表。
4、bingo