目录
七、vue-router 有哪几种导航钩子（ 路由守卫 ）？
一、vue2和vue3的区别
1、双向数据绑定的原理不同
vue2使用的是Object.defineProperty（不能监控数组下标变化的能力的、以及对象的属性值）
vue3使用的是proxy代理
2、vue2选项式API：在中小项目中，vue2的选项式API也是不错的选择，但是在大型项目中，vue3的组合式API会表现的更加优秀。
vue3组合式API优势 ：一个业务需要的数据方法，生命周期函数都在一起，配合hooks函数的使用，能让代码的复用性，条理性都很高，维护起来也很方便
3、vue3 其他的运行时增强
支持fragment（一个组件包含多个根节点）、Teleport （传送门）
4、vue3底层是由typescript编写的，完美适配typescript编写，适配的ui组件库由element-plus
vue2组件库element-ui
二、mixin混入对象
混入对象 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能
作用：抽取组件中相同的属性和方法到独立的文件，以便公用。
缺点：mixins对象会被混入该组件本身，所以可能会有命名冲突
三、hooks 特点
1、vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入，不同在于 hooks 是函数。
2、vue3 中的 hooks 函数可以提高代码的复用性，能够在不同的组件当中都利用 hooks 函数。
3、hooks 函数可以与 mixin 连用，但是不建议
四、keep-alive
1、用来缓存动态组件，它是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素
2、属性exclude/include/max
3、两个生命周期：activated： 页 面 第 一 次 进 入 的 时 候 ， 钩 子 触 发 的 顺 序 是created->mounted->activated
deactivated: 页面退出的时候会触发 deactivated，当再次前进或者后退的时候只触发 activated
五、生命周期
vue实例从创建到销毁的过程，就是生命周期
1、beforeCreate：实例初始化之后，data和watcher事件配置被调用之前
2、created：在实例创建完成之后。此时已经完成的配置有：data、methods的运算，watcher/event事件回调。但挂载还没开始，$el属性不可见。
3、beforeMount：开始挂载之前；相关的render函数首次调用
4、mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
如果root实例挂在了一个文档内的元素，当mounted被调用时vm.$el也在文档内
5、beforeUpadate：数据更新时调用，发生在虚拟ＤＯＭ重新渲染和打补丁之前。
这里适合在更新之前访问现有的DOM，例如 手动移出处已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染才会在服务端进行
6、updated：由于数据更改导致虚拟的ＤＯＭ重新渲染和打补丁
7、activated：keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用
8、deactivated：keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用
9、beforeDestory（销毁前）：组件销毁之前调用 ，在这一步，实例仍然完全可用。
10、destoryed（销毁后）：实例销毁后调用，调用后，vue实例指示的所有东西都会解绑定，所有的事件监听器都会被移除、所有的子实力也会被销毁。该钩子在服务器端渲染期间不被调用
11、errorCaptured（2.5.0+ 新增）：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生 错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该 错误继续向上传播
六、el、template、render
el：提供一个已存在的DOM元素作为vue实例挂载的目标
template：实例模板，可以是.vue 中的 template, 也可以是 template 选项, 最终会编译成 render 函数
render：不需要通过编译的可执行函数
在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染
七、vue-router 有哪几种导航钩子（ 路由守卫 ）？
全局前置钩子：router.beforeEach((to, from, next) =>{})一般用于登录验证
全局解析钩子：router.beforeResolve((to, from, next) =>{})，组件初始化，用法和前置区别不大
全局后置钩子：router.afterEach((to, from) =>{}) 一般路由跳转以后用window把窗口调上去
路由独享钩子：beforEnter((to, from, next) =>{})
组件内：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
导航守卫执行顺序：beforeRouteLeave < beforeEach < beforeRouteUpdate < beforeEnter < beforeRouteEnter < beforeResolve < afterEach
八、HTTP和TCP的关系
- TCP是传输层协议，而HTTP是应用层协议
- HTTP是要基于TCP连接基础上的