day02

5. 路由导航守卫

5.1 什么是导航守卫

路由的导航守卫，又叫做路由的钩子函数，或者路由的生命周期函数，是在页面跳转的过程中到了某一个特定的时间节点就会触发的钩子函数。
有三种七个

全局守卫

beforeEach 路由进入之前
beforeResolve 路由解析之前
afterEach 路由离开之前

组件级守卫

beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前

单个路由独享的守卫

beforeEnter 路由进入之前

这些导航守卫有三个参数 to from next，to 代表到哪儿去 from 代表从哪儿来 next 代表执行下一步

5.2 导航守卫的使用场景

在写代码的过程中我一般用导航守卫进行页面的鉴权处理，在用户登陆成功的时候，我们会把 token 和用户信息存到 vuex 或者本地存储中，代表了用户的登陆状态，在访问某个页面的时候判断是否存的有 token，就能正常访问这个页面，如果没有 token，那么就用 next 跳转到登陆页面。

5.3 导航守卫的执行顺序

beforeEach 前置守卫
beforeEnter 路由独享守卫
beforeRouteEnter 组件守卫
beforeResolve 解析守卫
afterEach 路由后置守卫

5.4 beforeEach 和 beforeResolve 的区别

这两个都是全局守卫 都是在路由跳转之前就会执行的守卫
beforeEach 比 beforeResolve 执行的时间要更早

6. v-if 与 v-show 的区别?

v-if 和 v-show 都是控制元素的显示与隐藏，不过 v-if 控制元素的显示和隐藏的时候会删除对应的 dom 元素，当每⼀个显示的时候，都会重新创建 dom 和渲染。
⽽ v-show 则是通过 css 的 display:none和 display:block 来控制元素的显示与隐藏。v-if ⽐较耗费性能，所以我们涉及到频繁的显示隐藏操作建议使⽤ v-show，如果不是频繁操作的话，可以使用v-if。

在项⽬中我会经常使⽤ v-if 和 v-show，⽐如我们在搜索功能的时候，他有⼀个历史记录，这个时候我们根据是否有搜索的结果来判断历史记录的显示与隐藏，这块我就可以使⽤ v-if ,当然⽤ v-show 也可以。以上就是我对 v-if 和 v-show 的理解。

7. v-for 与 v-if 的优先级那个⾼?如果同时使⽤ v-for 和 v-if 怎么解决?

v-for 的优先级⾼，因为 v-for 的时候我们才开始渲染 dom 元素，这时 v-if 还⽆法进⾏判断。

v-for 和 v-if 不能同时使⽤，我们可以通过标签，⽐如 div 或者 template 标签来进⾏包裹，把 v-if 写到包裹的标签上⾯(写到 v-for 外⾯)， 还有就是用计算属性算出来想要的数据再去循环。

在 vue3 中 v-if 的优先级更高。

8. methods computed watch 的区别

methods 是方法，各种事件放在这里，没有缓存功能。

computed 是计算属性，需要 return 计算的结果，并且有缓存功能，只有跟他有关的值发生变化才会重新计算，否则就从缓存里拿，通常用来计算购物车功能中的总数和总价。

watch 监听属性，有三个参数 handler（执行函数） deep（深度监听） immediate（立即监听）
如果不需要 deep 和 immediate 的时候就会简写成一个函数
watch 可以监听 data 数据还能监听路由的变化
watch 里可以执行异步操作 但是计算属性不行
watch 的使用场景：存本地存储的时候，只要数据变了就要重新存一次，那么就可以用 watch 实现

9. vue 常⽤的指令有哪些?

v-if        判断是否销毁/渲染
v-show        是否隐藏/显示
v-html        绑定元素(标签)
v-text        绑定文本
v-on        绑定事件
v-bind        动态绑定属性
v-model        双向数据绑定
v-for        循环遍历数据

10. vue 常⽤的修饰符有哪些?

.trim 去除⾸尾多余的空格
.stop 阻⽌事件冒泡
.once 只渲染⼀次
.self 事件只作⽤在元素本身
.number 将值转化为 number 类型
.capter 组件之间捕获
.prevent 阻⽌元素的默认⾏为
.native 事件穿透，让我们可以在⾃定义组件上定义事件和⽅法