Vue

1.mixin和hooks

minxin

mixin定义的是一个对象，这个对象包含vue中的options api, mixin中的数据都是独立的，不同组件的使用不会相互影响，生命周期函数合并后会先执行mixin的后执行组件内的，它和utils一样实现了抽离公用的函数和变量，此外还复用了vue2 options方法，如data,computed,生命周期函数等。

mixin的优点缺点

优点是：实现组件级的复用，不用重复写vue的options api如computed...

缺点是：

相同钩子函数中的相同函数名会发生冲突（vue组件的优先级更高）
隐式传入，变量来源不明确，不利于阅读，使代码变得维护及定位错误相对较麻烦
mixin无法传入灵活的传入参数

hooks

hooks定义的是一个函数，函数返回的是一个响应式对象，通过使用vue3的一些组合式api实现具有响应式的封装。

2.nextTick

nextTick里的回调会在下次DOM更新循环结束之后执行的，可以在修改数据后执行此方法获得最新的DOM。

3.directive

对html元素进行扩展，实现一些自定义的功能。

5个钩子函数： bind、unbind、inserted、update（被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。）、componentUpdated（被绑定元素所在模板完成一次更新周期时调用）

参数：el、binding（name,value,oldValue...）、vnode、oldVnode（仅在update和componentUpdated钩子中可用）

应用：提交防抖、图片懒加载

一篇文章带你了解如何在Vue3自定义指令在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统。我们看 - 掘金 (juejin.cn)

4.修饰符

事件修饰符

stop 阻止冒泡
capture 捕获
self 只在自身上触发函数
once 事件只触发一次
prevent 阻止默认行为
native 加在自定义组件的事件上，保证事件能执行

v-model 的修饰符

lazy 改变输入框的值时value不会改变，当光标离开输入框时才会改变
number 输入值转化为数值类型
trim 过滤用户输入的首尾空格

鼠标按钮修饰符

@click.left
@click.right
@click.middle

键盘事件的修饰符

@keyup.enter
@keyup.tab
@keyup.delete (捕获“删除”和“退格”键)
@keyup.esc
@keyup.space
@keyup.up
@keyup.down
@keyup.left
@keyup.right

Vue-router

参考：Vue-Router面试题汇总其中include可以是个数组，数组内容为路由的name选项的值。 hash: 兼容所有浏 - 掘金 (juejin.cn)

1.路由守卫

全局守卫

路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数

beforeEach 进入路由前

router.beforeEach((to, from, next) => {
  if(登录 || to.name === 'login'){
    next() 
  }else{ 
    next({ name: 'login' });
  } 
});

beforeResolve 全局解析守卫，在beforeRouteEnter后调用
afterEach 进入路由后

路由级守卫

在单个路由配置的时候也可以设置的钩子函数

beforeEnter

组件级守卫

在组件内执行的钩子函数，相当于为配置路由的组件添加的生命周期钩子函数。

beforeRouteEnter(不能获取组件实例 this，组件实例还没被创建，可以通过next的回调访问组件实例，因为回调的执行时机在mounted后面)
beforeRouteUpdate(在当前路由改变，但是该组件被复用时调用可以访问组件实例 this, 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转)
beforeRouteLeave(可以访问组件实例 this,应用于禁止用户离开，比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。)

2.完整的路由守卫流程

导航被激活
在失活组件内调用beforeRouteLeave
调用全局路由守卫beforeEach
在复用的组件内调用beforeRouteUpdate
调用路由独享守卫beforeEnter
解析异步路由组件
在被激活的组件内调用beforeRouteEnter
调用全局beforeResolve
导航被确认
调用全局afterEach
DOM更新
将组件实例传给next回调函数并执行回调

Vue、Vue-router重难点

Vue