Vue面试相关问题整理虚拟DOM的优劣如何?虚拟DOM实现原理?既然Vue通过数据劫持可以精准探测数据变化,为什么还需要虚拟DOM进行diff检测差异?vue组件间通信六种方式对于MVVM的理解MVVM的优缺点?什么是与MVC区别Vue 组件 data 为什么必须是函数，data什么时候可以适用对象?vue中 key 值的作用什么是vue的计算属性 和 watch 的差异和Vue.删除数组的区别v-if与v-show的用法与区别vuex是什么？怎么使用？哪种功能场景使用它？vuex中的变量是响应式的,页面刷新后数据无法保存?route和的区别vue路由的钩子函数Vue的路由实现：hash模式 和 模式Vue与以及React的区别对keep-alive 的了解？vue常用的修饰符？vue等单页面应用及其优缺点一句话就能回答的小问题Vue为什么没有类似于React中e的生命周期？参考
【Vue的双向数据绑定原理是什么】前言
浏览器前端优化,推荐，从页面渲染来看优化 。（这里有页面渲染过程）
看看 前端总结–性能优化
什么是vue生命周期
答： Vue 实例从创建到销毁的过程，就是生命周期 。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期 。
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑 。
Vue生命周期总共有几个阶段
(比较乱,因为比较简单, 也懒得整理了…)
它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后 。
创建期间的生命周期函数：
运行期间的生命周期函数：
销毁期间的生命周期函数：
图片展示1: - 应用场景.
图片展示2: - 用keep-alive, 会有额外的声明周期函数.
流程展示:
代码演示说明
Documentsrc="http://www.kingceram.com/post/lib/vue-2.4.0.js">{{ msg }}
>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: 'ok'},methods: {show() {console.log('执行了show方法')}},beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它// console.log(this.msg) // undefined// this.show() // error// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化},created() { // 这是遇到的第二个生命周期函数// console.log(this.msg) // ok// this.show()//在 created 中，data 和 methods 都已经被初始化好了！// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作},beforeMount() { // 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中// console.log(document.getElementById('h3').innerText) // {{ msg }}// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串},mounted() { // 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了// console.log(document.getElementById('h3').innerText) // ok// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动},// 接下来的是运行中的两个事件beforeUpdate() { // 这时候，表示 我们的界面还没有被更新【数据被更新了吗？数据肯定被更新了】/* console.log('界面上元素的内容：' + document.getElementById('h3').innerText)console.log('data 中的 msg 数据是：' + this.msg) */// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步},updated() {// console.log('界面上元素的内容：' + document.getElementById('h3').innerText)// console.log('data 中的 msg 数据是：' + this.msg)// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的}});
