vue面试题

Vue生命周期

Vue实例从创建到销毁的过程，就是Vue生命周期。

也就是从创建实例-》初始化数据=》模板编译-》挂载到dom-》数据更新重新渲染dom-》实例销毁的整个过程。

对应的钩子函数

beforeCreate: Vue的实例挂载元素el和数据对象data还没有进行初始化，还是一个undefined的状态

create: 此时vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载带dom

beforeMount: 在这里vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点

mounted: vue实例已经挂载到真实的dom上，可以通过对dom操作来获取dom节点

beforeUpdate: 响应式数据更新时调用，发送在虚拟dom打补丁之前，适合在更新之前访问现有的dom，比如手动移除已添加的事件监听器

update: 虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个含钩子操作数据，防止死循环

beforeDestory: vue实例销毁前调用，在这里还可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。

destoryed: vue实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。

9. vue-loader是什么？使用它的用途有哪些？
答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
10.为什么使用key?
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

14.分别简述computed和watch的使用场景
答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子： 购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

19.Vue中双向数据绑定是如何实现的？
答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

27.delete和Vue.delete删除数组的区别
答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

28.SPA首屏加载慢如何解决
答：安装动态懒加载所需插件；使用CDN资源。

35.axios的特点有哪些
答：从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。

4.created和mounted的区别
答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
5.vue获取数据在哪个周期函数
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

1.mvvm 框架是什么？
答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

1.vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
2.vuex有哪几种属性？
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

Vue组件是如何通信的

像常见的父子通信，然后非父子之间，就是我们兄弟组件之间通信，像父子组件之间的通信的话，有像我们的props，然后到父组件就是用自定义事件用$emit发布订阅的这种方式，然后父组件去监听，然后还有一种就是最直接的$parent或者说$children这样去传递数据，或者我们也可以用Provide注入和inject这种插件方式去传递组件里面的数据。当然还有一个就是我们的ref属性，因为这个是特有的可以去获取整个子组件的一些组件或者方法，整个组件都可以获取到，也就是我们的公共的bus以及我们的Vuex的状态管理实现来通信

v-for中为什么要用key

key 的作用主要是为了高效的更新虚拟dom，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

vue生命周期执行顺序（有父子组件情况）

加载渲染过程

父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted

子组件更新过程
父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated

父组件更新过程
父beforeUpdate —> 父updated

销毁过程
父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

前端优化

路由懒加载 图片压缩 cdn引入 keeplive缓存 减少一些请求次数动态组件加载 封装可复用行代码