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`没有被断言或细化到一个确切类型之前

 

 

 

 

 

 

 ，是不允许在其上进行任何操作的 
 
 
 
 
 
 
。