VUE相关的复习记录-持续更新

一：axios 拦截器

 　　拦截器可以分为两种 request.interceptors.request  && axios.interceptors.response

发送请求之前拦截 request；接受请求拦截  response

　　request 可以添加请求验证，headers 和验证状态等

　　response 可以做数据格式化，和验证状态等

二：vuex 属性说明

　　state: 仓库 ，用来储存数据

　　getters: 读取states 的方法。

　　mutations： 同步更新状态

　　action： 异步更新状态

　　使用方法： 用dispatch 调用action,  action 调用mutations 达到全局状态管理。

三：vue 的生命周期及每个阶段的区别与不同

　　create 创建 -------- 创建vue实例并初始化

　　mount 挂载 -------- 把vue实例和视图进行关联

　　update 更新 ------- 监听数据与视图的变化

　　destroy销毁 ------- 销毁实例

　　beforecreate：在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前调用，里面的this指向实例

　　created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置；数据观测（data observer),属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，还未与页面关联起来，$el属性目前不可见。可在这阶段进行一些初始化的操作（如ajax获取数据之类的）

　　beforemount：在挂载之前没调用，解析模板，把实例对象下的$el属性指向设置中的el参数指定的元素，这个解析后的模板还没有和$el进行绑定

　　mounted：挂载之后调用，把解析后的模板与页面元素进行绑定，用解析后的模板内容替换页面

　　beforeupdate在数据绑定之前被调用

　　updated在数据改变之后被调用，可以进行依赖于dom的操作（可以在这个阶段进行dom操作）

　　activated 被 keep-alive缓存的组件激活时调用。

　　deactivated 被keep-alive 缓存的组件停用时调用。

　   errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

　　serverPrefetch serverPrefetch 的前身是 ssrPrefresh；这个钩子是用来处理 ssr 的；允许我们在渲染的过程中 “等待” 异步数据，可以在任何组件中使用，而不仅仅是路由组件

四：VUE的双向绑定

　　vue2.0 创建 Vue 实例时,vue 会遍历 data 选项的属性，采用数据劫持，通过Object.defineProperty() 来劫持各个属性的setter，getter,在数据变动时，结合发布者-订阅者模式的方式，发布消息给订阅者，触发相应的监听回调。

　　vue3 则是利用proxy代理对象进行的，不在需要遍历对象

五：webpack 基础知识

　　entry： 指定入口

　　output： 打包入口， 定义如何输出的选项

　　loader： 处理非JS文件

　　plugins:  插件配置

　　module: 模块相关配置

　　reslove: 解析模块可选项

六：vue相关 常见原理

　　computed： 计算属性。类似于watch。 当computed 依赖的状态发生改变时，变会通知computed，然后进行新的最终的值计算，如果发生改变则会触发watcher 进行重新渲染

　　watch:  监听器： 更多的作用是观察，不具有缓存性，在某些属性变化后，进行回调后的后续操作

  　 nextTick： 由于js 是单线程的，所有同步任务都在主线程进行，除主线程外，还存在一个任务队列，当主线程结束后，便会执行这个任务队列.

　　data: 组件中，必须是一个函数。由于组件是可以复用的。类似于加上一个作用域，否则多组件会产生数据污染。

       Vue 事件机制,手写$on(提交),$off(注销),$emit(),$once(执行一次)

七.如何理解MVVM原理

 　　MVVM是Model-View-ViewModel的简写

• Model：数据模型层，用来处理业务逻辑和与数据库交互
• View：视图层，DOM
• ViewModel：视图模型层，用来处理Model层和View层的交互

 　　Vue中VM的实现原理

• 响应式：Object.defineProperty()来做数据劫持和响应式
• 模板解析：Vue中的render函数，来将模版转换成虚拟DOM
• 将虚拟DOM渲染成html：通过updateComponent方法实现

八.Vue 数据响应式原理

　　defineReactive() 就是用于定义响应式数据的核心函数。它主要做的事情包括：

　　新建一个 dep 对象，与当前数据对应

　　通过 Object.defineProperty() 重新定义对象属性，配置属性的 set、get，从而数据被获取、设置时可以执行 Vue 的代码

九.vue中是如何检测数组变化 ?

　　vue2  是通过原型链去拦截对对象的操作

　　vue3  proxy 是Es6的底层方法，本身就可以监听

十、为何Vue采用异步渲染?

　　从用户体验角度，因为数据异步加载，页面会有闪烁的效果。

　　从性能角度来说，无论是浏览器重绘阶段还是重排阶段都会在性能下造成低效率的页面渲染。 

　　将多次数据变化所引起的响应变化收集后合并成一次页面渲染，从而更合理的利用机器资源，提升性能与用户体验。