Vue面试题
1.Vue生命周期
什么是Vue生命周期：Vue实例从创建到销毁的过程，就是生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、卸载等一系列过程
生命周期的作用是什么：生命周期有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑
生命周期共有几个阶段：8个：创建前后，载入前后，更新前后，销毁前后
第一次页面加载会触发哪几个钩子：会触发beforeCreate，created，beforeMount、mounted这几个钩子
DOM渲染在哪个周期中就已经完成：在mounted中就已经完成
每个生命周期适合哪些场景：
beforeCreate：可以在这里加一个loading事件，在加载实例时触发
created：初始化完成时的事件写在这里，如在这里结束loading事件，异步请求也适宜在这里调用
mounted：挂载元素，获取到DOM节点，如事件中心触发事件
beforeDestory：可以做一个确认停止事件的确认框
nextTick：更新数据后立即操作dom
beforeCreate:在实例初始化之后，数据观测data observer(props、data、computed) 和event/watcher事件配置之前被调用。created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。beforeMount:在挂载开始之前被调用：相关的render函数首次被调用。mounted:el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。beforeUpdate:数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。updated：无论是组件本身的数据变更，还是从父组件接收到的props或者从vuex里面拿到的数据有变更，都会触发虚拟DOM重新渲染和打补丁，并在之后调用updated。beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。destroyed:Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
注意:
created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。
单个组件的生命周期
- 初始化组件时，仅执行了
beforeCreate/Created/beforeMount/mounted四个钩子函数 - 当改变data中定义的变量（响应式变量）时，会执行
beforeUpdate/updated钩子函数 - 当切换组件（当前组件未缓存）时，会执行
beforeDestory/destroyed钩子函数 - 初始化和销毁时的生命钩子函数均只会执行一次，
beforeUpdate/updated可多次执行
2.路由跳转方式
一种是<router-link to="home"></router-link>，会被渲染为<a>标签；另一种是编程式导航，通过js跳转，如router.push('/home')
3.key
4.组件中的data为什么是函数
组件是需要复用的，如果不是函数的话，当操作一个组件时，其他组件也会做相同的事情；而根实例new Vue不会被复用，所以可以不是函数；这里data是函数其实是利用了闭包的原理
5.Vue的单向数据流
所有的prop都使得其父子prop之间形成了一个单向绑定，父级prop的更新会向下流动到子组件中，但是反过来则不行
6.keep-alive
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免被重新渲染
一般结合路由和动态组件一起使用，用于缓存组件
提供include和exclude属性，两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，而其余的会被缓存，其中exclude的优先级比include高
<keep-alive include="bookLists,bookLists">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
<router-view></router-view>
</keep-alive>对应的两个钩子函数activated和deactivated，当组件被激活时，触发钩子函数activated，当组件被移除时，触发钩子函数deactivated
7.nextTick()
在下次DOM更新循环结束之后执行延迟回调，在修改数据之后，立即使用这个回调函数，获取更新后的DOM
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML
})例如在created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，因为在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作是徒劳的
，所以此时一定要把DOM操作的js代码放进Vue.nextTick()的回调函数中，与这个操作对应的就是mounted()函数，因为在该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
8.Vuex
9.Vue优化
