日常知识点总结（vue篇）：
1、vue的生命周期：
Vue实例从开始创建，初始化数据，编译模板，挂载Dom->渲染，更新->渲染，卸载等一系列过程，我们称这是Vue的生命周期。
作用：生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
1）beforeCreate( ) ;
实例创建前,这个阶段实例的data,method是读不到的
2）created( );
实例创建后,这个阶段已经完成了数据观测(data observer)，属性和方法的运算，watch/event事件回调.mount挂载阶段还没开始,$el属性目前不可见,数据并没有在Dom元素上进行渲染.
3）beforeMount( );
在挂载开始之前被调用,相关的render函数首次被调用.
4）mounted( );
el选项的Dom节点被新创建的vm.$el替换,并挂载到实例上去之后调用此生命周期函数.此时实例的数据在Dom节点上进行渲染.
5）beforeUpdate( );
数据更新时调用,但不进行Dom重新渲染,在数据更新时Dom没渲染前可以在这个生命函数里进行状态处理
6）updated( );
这个状态下数据更新并且Dom重新渲染,当这个生命周期函数被调用时,组件Dom已经更新,所以你现在可以执行依赖于Dom的操作.当实例每次进行数据更新时updated都会执行.
7）beforeDestory( );
销毁前执行（实例仍然完全可用）。可以做一个确认停止事件的确认框。
8）destoryed( );
Vue实例销毁后调用.调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁.
Vue每个生命周期阶段可以做的事:
created：实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
mounted：实例已经挂载完成，可以进行一些Dom操作。
beforeUpdate：可以在这个钩子中进一步的更改状态，这不会触发附加的重渲染过程。
updated：可以执行依赖于Dom的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无线循环。该钩子在服务端渲染期间不被调用。
beforeDestory：可以执行一些优化操作，清空定时器，解除绑定事件。
nextTick：针对单一事件更新数据后立即操作dom
watch: 监听具体数据变化,并做相应的处理
2、vue响应式原理：
当一个vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例内部都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
3、vue双向数据绑定原理：
vue.js是采用数据劫持结合“发布者---订阅者”模式的方式，通过Object.defineProperty( )来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
1）需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到数据变化。
2）compile解析模板指令，将模板中的变量替换成数据，然后初始化 渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
3）Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：在自身实例化时往属性订阅器（dep）里面添加自己，自身必须有一个update( )方法，待属性变动dep.notice( )通知时，能调用自身的update( )方法，并触发Compile中绑定的回调，则功成身退。
4）MVVM作为数据绑定的入口，整合Observe，Compile和Watcher三者，通过Observe来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observe和Compile之间的通信桥梁，达到数据变化-->视图更新；视图交互变化(input)-->数据model变更的双向绑定效果。
4、vue的组件通信：
1）父子间通信，父 -> 子通过props，子 -> 父$on，$emit(发布-订阅)
2）获取父子组件实例的方式$parent，$children
3）在父组件中提供数据子组件进行消费 Provide，inject(写插件用较多)
provide( ) { someval:'来自低级组件的数据'}
inject:['somaval']
4）Ref获取实例的方式调用组件的属性或者方法
5）Event Bus 实现跨组件通信
非父子组件/兄弟组件之间的数据传递：
/*新建一个Vue实例作为中央事件*/
let event = new Vue();
/*监听事件 */
event.$on('eventName',(val) => {
//.......do something
})
/*触发事件 */
event.$emit('eventName','这是一条消息。')
6）vuex：状态管理实现通信。服务器设置session服务器返回给客户端的信息在响应头中带着set-cookie='connect.sid'客户端会把信息种植到本地的cookie中httponly客户端再次向服务器发送请求的时候，会默认在请求头中cookie把connect.sid传递发给服务器
5、Vuex是什么：
定义：Vuex是专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
状态自管理应用包含以下几个部分：
State，是 Vuex 这一状态管理工具的唯一的数据源，所有的数据都储存在里面。
Getter，对数据获取之前的再次编译，可以理解为state的计算属性，
在组件中使用$store.getters.fun( )。
Mutation ，是同步更新数据（内部会进行是否为异步方式更新数据的检测）。$watch严格模式下会报错
在组件中使用$store.commit(" ",params)。
Action，异步操作，可以获取数据后调用mutation提交最终数据
在组件中使用$store.dispath(" ")。
Module，当应用非常复杂时，可以把整个store拆分成几个模块（module）,每个module中都可以含有各自的state，getter，mutation，action
vuex的使用：
1）在src目录下创建vuex文件夹，并在文件夹下创建一个store.js文件。
2）下载，并引入vuex。
3）在store.js文件中，引入vuex并且使用vuex。
4）在main.js中引入store并Vue.use(Vuex)。
使用场景：单页应用中，组件之间的状态。音乐播放，登录管理，加入购物车。
6、vue-loader是什么，什么用途：
vue-loader是基于webpack的一个loader(加载器)，解析和转换.vue文件，提取出其中的逻辑代码script，样式代码style，以及HTML模板template，再分别把它们交给对应的loader去处理，核心的作用，就是提取，划重点。
webpack的loader，其实就是用来打包，转译js或者css文件，简单的说就是把写的代码转换成浏览器能识别的，还有一些打包，压缩的功能等。
vue-loader的作用：
1）允许为Vue组件的每个部分使用其它的webpack loader，例如在