vue面试题之vue项目的优化方案

1. vue中项目优化：

路过的朋友，能够点个赞，关注一下~~~

1.1 书写习惯

1. 不须要作响应式的数据，不要放在data中

不要把全部的数据都放到data中，只把你须要作响应式的数据放到data中。若是一个数据放到了data中，vue会给这个数据添加一个getter和setter，当你获取数据调用getter，当你设置数据调用setter，性能不高。

2. SPA(Single Page Application)

单一页面，不利于SEO的搜索，主页可使用服务器渲染。

3. 能拆分的组件尽量拆分 颗粒度尽量小

提升利用性，增长代码的可维护性; 减少没必要要渲染

4. v-if v-show

   • v-show 控制的是display v-show仍是会渲染
   • v-if 根据就不会渲染
   • 能使用v-if的就使用v-if
   • 若是说频繁让一个组件显示隐藏，用v-show
   • 若是不频繁让一个组件显示隐藏，用v-if

5，使用v-for时，必须加上key

尽量使用id做为key 减小没必要渲染 通常状况下，不要使用index做为key (例如，当进行排序的时候，数据的key值发生了改变，而vue机制会将其判断为数据的改变，而进行从新渲染。)

6. Object.freeze

也会实现数据劫持，将数据进行冻结 一个被冻结的对象不再能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。

7. 路由懒加载

在使用该路由的时候，再进行导入该路由。

8. 组件懒加载

在一开始的时候不须要进行导入组件，当匹配到路由时，须要加载组件的时候，再将组件进行载入 components:{ yyy: () => import(yyy) }

1.2第二类：加载

• 图片赖加载，须要的时候再进行请求加载。
• 第三方模块按需导入，在使用第三方插件的时候，并非使用里面的全部的方法，咱们能够按需导入，使用到那个便将那个进行导入

1.3 第三类：提高用户体验

1. 使用骨架屏，当用户的网络很差的时候，发送请求时，页面上显示大体的应用的框架，增长用户的体验感。

2. pwa 缓存

当使用弱网，2G，3G网的时候，能够将内容进行缓存

1.3 第四类： SEO

可使用服务器端渲染主页面，方便seo进行数据的爬取

若是网络环境很是很差，可能出来白屏 预渲染成 死数据 <div id="app">heelo</div> 经过插件来实现 SSR

1.4 第五类：从后端角度来优化

• 缓存
• 压缩