1.Vue的生命周期
Vue的生命周期主要分为几个简单，数据初始化，dom挂载，数据更新，组件卸载，在一个就是开启了组件缓存的时候，会有组件启用和组件停用阶段，每个阶段都去前后两个钩子除了缓存的那俩
数据初始化阶段
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
dom挂载阶段
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el 被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时vm.$el也在文档内。
mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
数据跟新阶段
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：
缓存启用的时候会有下面两个钩子
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
组件卸载的时候：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
2.vue实现数据双向绑定的原理
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
3.vue组件的通讯？
1.父组件传子组件
单项数据流props
使用refs访问子组件
使用$parent访问父组件
使用$children访问子组件
使用$root访问当前组件树的根 Vue 实例
2.子组件传递数据给父组件：
第一种:
通过定义函数实现
1、父组件设置含有this.setState({...})的方法,形参为接收子组件的变量
2、将方法作为参数传递给子组件
如<B sub={this.方法.bind(this)]/>
3、子组件通过this.props.键名接收函数
this.props.键名(子组件的数据)
第二种:
通过父元素传递的函数在标签中通过箭头函数,直接传参
如:<button onClick={()=>{this.props.函数(参数)}}></button>
3.子改父
给子组件设置函数this.$emit('change' ,i) 触发父组件函数
给父组件设置@change，要和子组件上传的函数参数相同
在父组件methods里设置参数直接改变父组件的值
4.兄弟组件间通信
①用事件发布订阅 var bus=new vue（）；bus.$emit("id-selected",1)；bus.$on（"id-selected",function(id){}）
②用vuex来实现
5.VueX是做什么的？
Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改；
state: state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。
actions:Actions 即是定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。
mutations: 调用 mutations 是唯一允许更新应用状态的地方。
getters: Getters 允许组件从 Store 中获取数据，譬如我们可以从 Store 中的 projectList 中筛选出已完成的项目列表
modules: modules 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中。随着应用复杂度的增加，这种拆分能够更好地组织代码
6.为什么 Vuex的mutation中不能做异步操作？
Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。
7.为什么v-for和v-if不建议用在一起
当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费
这种场景建议使用 computed，先对数据进行过滤
8.组件中的data为什么是一个函数？
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。
如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
9.nextTick的实现原理是什么？
在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 nextTick 来获取更新后的 DOM。
nextTick主要使用了宏任务和微任务。
根据执行环境分别尝试采用Promise、MutationObserver、setImmediate，如果以上都不行则采用setTimeout定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。
10.Vue中组件生命周期调用顺序是什么样的？
组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
11.Vue的路由如何传参？
<router-link:to="{path:‘details‘,query: {id:el.tog_line_id}}"><router-link:to="{name:‘details‘,params:{id:el.tog_line_id}}”>
然后在组件内部通过$route.params来读取数据，但是路由传递的参数值是对象的话就不行了会报错，一般都是在传递之前先吧需要传递的数据使用base64转化一下就不会造成路由报错了
12.写 React/Vue 项目时为什么要在组件中写 key，其作用是什么？
key 的作用是为了在 diff 算法执行时更快的找到对应的节点，提高 diff 速度。
vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff 函数中。可以先了解一下 diff 算法。
在交叉对比的时候，当新节点跟旧节点头尾交叉对比没有结果的时候，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采用一种遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言。map 映射的速度更快。
13.如何让css只在当前组件中起作用
在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped
14.防抖
触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；
思路：
每次触发事件时都取消之前的延时调用方法：
15.节流
高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
思路：
每次触发事件时都判断当前是否有等待执行的延时函数。
16.关于vuejs页面闪烁{{message}}
在Vue.js指令中有v-cloak，这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。用法如下：
[v-cloak]{
display:none; }
<divv-cloak>{{message}}</div>
这样<div>不会显示，直到编译结束
