vue常见面试题
一、vue的生命周期有哪些？
beforeCreate:function(){ // 创建前
// 此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。
console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
},
created:function(){ // 创建后
// 在这个阶段vue实例已经创建，仍然不能获取DOM元素。vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM
console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
},
beforeMount:function(){ // 载入前
// 在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
console.log('接下来开始render，渲染出真实dom')
},
mounted:function(){ // 载入后
// 在这个阶段，数据和DOM都已被渲染出来，可以获取dom节点。
console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
console.log('可以在这里操作真实dom等事情...')
},
beforeUpdate:function(){ // 更新前
//这里不能更改数据，否则会陷入死循环
console.log('beforeUpdate:重新渲染之前触发')
console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
},
updated:function(){ // 更新后
//这里不能更改数据，否则会陷入死循环
console.log('updated:数据已经更改完成，dom也重新渲染完成')
},
beforeDestroy:function(){ // 销毁前
console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
},
destroyed:function(){ // 销毁后
console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
}
/*
* 第一次页面加载会触发beforeCreate、created、beforeMount、mounted, mounted说明dom渲染完毕
*/
二、watch和computed的区别？
答：
1.watch用于监听数据变化。
2.computed用于处理复杂的逻辑运算。
使用场景：
1.如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。 // 例子： 购物车商品结算的时候
2.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。 // 例子： 搜索数据
三、父组件向子组件传递数据？
答：通过props
四、子组件像父组件传递事件？
答：$emit方法
五、如何获取dom?
答：ref="domName" 用法：this.$refs.domName
六、vue优点？
答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势
七、v-show和v-if指令的共同点和不同点？
答: 共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
八、为什么使用key?
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
九、vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，….. export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
十、vuex有哪几种属性？
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
十一、vue-router实现路由懒加载（ 动态加载路由 ）
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
以上面试题仅供个人学习，如有错误请指正。谢谢。
