138 lines
5.0 KiB
Markdown
138 lines
5.0 KiB
Markdown
# 与vue项目相关，其实也不止vue，js之类的都算其中.
|
|
|
|
|
|
---
|
|
# 子子组件之间的通信可以通过事件总线（eventBus）实现
|
|
---
|
|
|
|
# doucument.createElement出来的东西不及时销毁就会一直游离在外面不被释放，积累下来很不好。(似乎是错误的)
|
|
|
|
|
|
---
|
|
# 组件的设计
|
|
组件设计可以分成业务组件，展示组件，展示组件只负责以对应的形式展示对应的数据，对于业务的处理（如增删查改），则需要通过emit或其他方法交给业务组件处理
|
|
|
|
---
|
|
# 路由返回拦截hook（路由守卫）
|
|
* 当点击返回键（浏览器或者是页面上的路由返回功能）时触发，形式如下：
|
|
```ts
|
|
import { onBeforeRouteLeave } from 'vue-router'
|
|
onBeforeRouteLeave((to, from, next) => {
|
|
...
|
|
if (...) {
|
|
...do something
|
|
next(false)
|
|
return
|
|
}
|
|
...
|
|
next(true)
|
|
})
|
|
```
|
|
* 当next===false时，取消路由原有的返回功能
|
|
---
|
|
## 具名作用域插槽
|
|
* 具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到
|
|
```
|
|
<MyComponent>
|
|
<template #header="headerProps">
|
|
{{ headerProps }}
|
|
</template>
|
|
|
|
<template #default="defaultProps">
|
|
{{ defaultProps }}
|
|
</template>
|
|
|
|
<template #footer="footerProps">
|
|
{{ footerProps }}
|
|
</template>
|
|
</MyComponent>
|
|
```
|
|
* 传入props
|
|
```
|
|
<slot name="header" message="hello"></slot>
|
|
```
|
|
* 是由插件传回父组件，如上面的message会被headerProps收到，可以根据此进行进一步的处理。
|
|
---
|
|
|
|
# style相关
|
|
* 组件样式穿透中遇到需要修改样式的组件在组件外部的可以通过再创建一个```<style>```标签且不使用scope来实现。其中必须指定class防止样式污染。
|
|
example:
|
|
```scss
|
|
<style lang="scss">
|
|
.replay-result-card-pop-class {
|
|
.result-card-share {
|
|
...
|
|
.result-card-share-text {
|
|
...
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
* 组件：
|
|
```html
|
|
<el-popover
|
|
popper-class="replay-result-card-pop-class"
|
|
>
|
|
<template #default>
|
|
<div class="result-card-share" ref="shareRef">
|
|
<div class="result-card-share-qrcode">
|
|
...
|
|
</div>
|
|
<div class="result-card-share-text">扫码分享</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
```
|
|
|
|
# 路由相关：
|
|
|
|
* 路由守卫
|
|
|
|
- - beforeEach 全局前置守卫
|
|
|
|
作用：
|
|
主要用于在路由跳转前进行权限验证、页面加载状态的设置等操作。例如，判断用户是否已经登录，如果没有登录且要访问需要登录才能访问的页面，就可以将用户重定向到登录页面。
|
|
它可以对每一次路由跳转进行全局拦截，是控制路由访问权限的重要手段。
|
|
|
|
- - afterEach全局后置守卫
|
|
|
|
作用：
|
|
它在路由跳转完成后被调用，主要用于记录页面访问历史、修改页面标题或者进行一些不需要阻塞路由跳转的操作。
|
|
例如，根据不同的路由来更新文档的标题，或者发送页面访问统计数据到服务器。
|
|
|
|
- - 全局解析守卫（beforeResolve）的触发时机
|
|
|
|
全局解析守卫beforeResolve在路由导航被触发后，在所有组件内守卫和异步路由组件被解析之前调用。它是在beforeEach之后，但是在组件实例创建和beforeRouteEnter等组件内守卫之前执行。这意味着它处于路由导航过程的一个中间阶段，此时路由已经被匹配，但组件还没有完全解析和进入。
|
|
主要作用
|
|
数据预获取：
|
|
可以用于获取组件渲染所需的数据。与beforeEach不同的是，beforeResolve更专注于确保在组件真正开始渲染之前，所有必要的数据都已经获取并准备好。例如，对于一个包含多个嵌套组件的复杂页面，其中每个组件都需要从服务器获取数据，beforeResolve可以协调这些数据获取操作，确保所有数据都准备好后再进行组件渲染。
|
|
处理异步操作的集中点：
|
|
它为处理整个路由导航过程中的异步操作提供了一个集中的位置。在大型应用中，可能会有多个异步操作需要在路由跳转时完成，如加载第三方脚本、初始化插件等。beforeResolve可以用于确保这些异步操作都顺利完成后再继续路由解析过程。
|
|
|
|
- - 组件路由守卫
|
|
```vue
|
|
<script setup>
|
|
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
|
|
import { ref } from 'vue'
|
|
|
|
// 与 beforeRouteLeave 相同，无法访问 `this`
|
|
onBeforeRouteLeave((to, from) => {
|
|
const answer = window.confirm(
|
|
'Do you really want to leave? you have unsaved changes!'
|
|
)
|
|
// 取消导航并停留在同一页面上
|
|
if (!answer) return false
|
|
})
|
|
|
|
const userData = ref()
|
|
|
|
// 与 beforeRouteUpdate 相同，无法访问 `this`
|
|
onBeforeRouteUpdate(async (to, from) => {
|
|
//仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
|
|
if (to.params.id !== from.params.id) {
|
|
userData.value = await fetchUser(to.params.id)
|
|
}
|
|
})
|
|
</script>
|
|
``` |