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

 

 

 

 

 

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