【博学谷学习记录】超强总结，用心分享 | vue面试1
vuex的原理是什么？
它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store，里面又包括:
（1）state（数据）：用来存放数据源，就是公共状态;
（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据；
（3）actions（事件）：要执行的操作，可以进行同步或者异步事件
（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源(同步操作)
（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块；
vue组件通信方式
props 父子组件通信
通过emite触发自定义事件
兄弟组件通信
EventBus
$ref通过获取节点通信
依赖插入provide/reject
多层嵌套：
$attrs, $listener
Vuex状态管理器
localStorage/SessionStorage持久化存储
localstorage和sessionstorage的区别
- 存储时间：localStorage的生命周期是永久的，sessionStorage的生命周期是在仅在当前会话下有效。关闭就没有了，只在当前标签可用，当前标签的iframe中且同源可以共享
- 存储大小：5MB
- 存储位置：都保存在客户端
- 存储类型：字符串类型
- 获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage
- 应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录
wather和compents的区别
-
共同点：都是用于监听数据变化的属性
-
不同点：
- computed 如果函数所依赖的属性没有发生变化，从缓存中读取， 必须有return返回
- watch中的函数是不需要调用的，只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用， immediate:true 页面首次加载的时候做一次监听
-
应用场景：computed 应用于数据计算，watch用于数据监听
错误的code码
- 200 成功处理请求
- 300 重定向，完成请求，需要进一步操作
- 400 请求错误，语法错误或者权限错误
- 500 服务器错误
vue的生命周期函数
Vue2
`beforeCreate`阶段data、methods、computed以及watch上的数据和方法都不能被访问。
`created`在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。
`beforeMount`发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。
`mounted`在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。
`beforeUpdate`发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。
`updated`发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。
`beforeDestroy`发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。
`destroyed`发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
vu3
`beforeCreate`和`create`被`setup`取代
`beforeDestroy`和`destroyed`被`beforeUnmount`和`unmounted`取代
`errorCaptured`： 在捕获了后代组件传递的错误时调用。
`renderTracked`：（仅开发时用）在一个响应式依赖被组件的渲染作用追踪后调用。
`renderTriggered`: （仅开发时用） 在一个响应式依赖被组件触发了重新渲染之后调用。
`activated`: 若组件实例是`<KeepAlive>` 缓存树的一部分，当组件被插入到 DOM 中时调用。
`deactivated`: 若组件实例是`<KeepAlive>` 缓存树的一部分，当组件从 DOM 中被移除时调用。
`serverPrefetch`: 当组件实例在服务器上被渲染之前要完成的异步函数。
常用到的有哪些组件封装
1- 正常的封装组件，导入组件
2- 通过slot 封装组件，
3- 全局注册组件Vue.component()
混入模式
flex布局
# nowrap不换行 wrap换行 wrap-reverse:倒叙换行
flex-wrap： nowrap
ts
unknow和any的区别
any意味着ts不会对它进行任何类型校验
在`unknown`没有被断言或细化到一个确切类型之前，是不允许在其上进行任何操作的。