vue面试题（四）

一、为何组件的data是一个函数

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；
JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

二、ajax应该放在那个生命周期里？

应该放在mounted生命周期里
为什么？
js是单线程，ajax是异步获取数据
为什么不在 created 里去发ajax？created 可是比 mounted 更早调用啊，更早调用意味着更早返回结果，那样性能不是更高？
首先，一个组件的 created 比 mounted 也早调用不了几微秒，性能没啥提高；
而且，等到异步渲染开启的时候，created 就可能被中途打断，中断之后渲染又要重做一遍，想一想，在 created 中做ajax调用，代码里看到只有调用一次，但是实际上可能调用 N 多次，这明显不合适。
相反，若把发ajax 放在 mounted，因为 mounted 在第二阶段，所以绝对不会多次重复调用，这才是ajax合适的位置.

三、何时使用异步组件？

• 加载大组件时
  例如：echarts

• 路由异步加载

四、何时使用keep-alive?

缓存组件，不需要重复渲染？
比如多个静态tab页面的切换

五、Vuex中action和mutation有何区别

action中处理异步，mutation不可以
mutation做原子操作，原子：每次只做一个操作
action可以整合多个mutation

六、vue常见的性能优化方式？

• 合理使用v-show和v-if
• 合理使用computed
• v-for中使用key,以及避免和v-if同时使用
• 自定义事件，DOM事件机试销毁，不销毁的话可能会造成内存泄漏，越来越卡
• 合理使用异步组件
• 合理使用keep-alive
• 图片懒加载
• 路由懒加载
• 使用第三方插件实现按需加载