前端面试题10

1.vue数据缓存应该怎样实现?

keep-alive缓存机制,包裹组件动态,避免重复渲染,第一步先在路由里面配置.那就要在router-view里面多加个v-if判断了，然后在router定义的文件里面在想要缓存的页面多加上“meta:{keepAlive:true}”，不想要缓存就是“meta:{keepAlive:false}”或者不写，只有为true的时候是会被keep-alive识别然后缓存的
再用标签包裹住,就可以实现.

2.后台返回大量数据,前端应该怎样处理?

采用懒加载+分页(前端维护懒加载的数据分发和分页 懒加载和分页:方式一般用于做长列表优化, 类似于表格的分页功能,
具体思路就是用户每次只加载能看见的数据, 当滚动到底部时再去加载下一页的数据.
这里我们通过监听window的scroll事件以及对poll元素使用getBoundingClientRect来获取poll元素相对于可视窗口的距离,
从而自己实现一个懒加载方案. 虚拟滚动技术:也可以用来优化长列表,
其核心思路就是每次只渲染可视区域的列表数,当滚动后动态的追加元素并通过顶部padding来撑起整个滚动内容,实现思路也非常简单.

3.防抖节流怎么实现?

防抖（debounce）
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次. 我们采用定时器的方式，函数第一次执行时设置一个定时器，设定好时间，之后再调用就清除之前设置的定时器，重新设定一个新的定时器，没有存在没有被清除的定时器，在定时器计时结束后调用函数执行。

节流（throttle）
1.鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断 使用时间戳实现 一开始时间设置为0，当调用事件时，先取出当前时间戳，减去之前的时间戳，如果结果大于设置的时间周期，就执行函数。然后更新时间戳为当前时间戳，如果小于就不执行。

4. axios请求拦截器和响应拦截器

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

5. 动态路由实现?

后端返回的菜单数据一般有两种，处理好的树状结构、或者未处理的列表数据 拿到后端的数据后，使用Vuex管理这些菜单数据。

6. vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js
应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
场景：多个组件共享数据或者是跨组件传递数据时 (1)下载cnpm install vuex --save
(2)在src目录中，创建store文件，并创建vuex中模块的文件名，每一个都单独拆分开，便于管理模块。
(3)在你的index.js相当于vuex的主目录，文件都在index.js文件引入

7. 深浅拷贝实现,以及运用场景?

浅拷贝只是拷贝基本类型的数据，如果父对象的属性等于数组或另一个对象，那么实际上，子对象获得的只是一个内存地址，因此存在父对象被篡改的可能，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存:(Object.assign())
深拷贝就是能够实现真正意义上的数组和对象的拷贝。递归调用"浅拷贝"。（深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象）
深拷贝函数：(JSON.parse(JSON.stringify())) 这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

8. css优化?

1、内联首屏关键CSS；2、异步加载CSS；3、文件压缩；4、去除无用CSS；5、有选择地使用选择器；6、减少使用昂贵的属性；7、优化重排与重绘；8、不要使用@import。”

9. 垃圾回收机制?

js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为“离开环境”。

10. vue页面白屏的原因及优化

原因:单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js
和vendor.js)，所以当网速差的时候会产生一定程度的白屏 (1)路由懒加载，组件懒加载 (2) CDN 资源优化 将
vue、vue-router、vuex、axios 这些 vue 全家桶的资源，全部改为通过 CDN 链接获取，在 index.html
里插入相应链接,在 vue.config.js 配置 externals 属性

11. 能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？
    （

1）hash 模式的实现原理 早期的前端路由的实现就是基于 location.hash
来实现的。其实现原理很简单，location.hash 的值就是 URL 中 #
后面的内容,类似a标签跳转当用户点击这个标签时url值发生改变可以使用 hashchange 事件来监听 hash
值的变化，从而对页面进行跳转（渲染）
2）history 模式的实现原理 HTML5 提供了 History API 来实现 URL
的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()
这两个API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录

12. 对 Vue 项目进行哪些优化？
    ·

v-if 和 v-show 区分使用场景 · computed 和 watch 区分使用场景 · v-for 遍历必须为 item
添加 key，且避免同时使用 v-if · 长列表性能优化 · 事件的销毁 · 图片资源懒加载 · 路由懒加载 ·
第三方插件的按需引入 · 优化无限列表性能 · 服务端渲染 SSR or 预渲染

13. Webpack 层面的优化

减少 ES6 转为 ES5 的冗余代码 提取公共代码 模板预编译 提取组件的 CSS 优化 SourceMap 构建结果输出分析 Vue
项目的编译优化
14. Vue渲染过程？ (1)把模板编译为render函数 (2)实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom (3)对比虚拟dom，渲染到真实dom
(4)组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom,

14. 怎样理解 Vue 的单向数据流？

1. Vue 的单向数据流：指数据⼀般从⽗组件传到⼦组件，⼦组件没有权利直接修改⽗组件传来的数据，即⼦组件从 props 中直接获取的数
   据，只能请求⽗组件修改数据再传给⼦组件。⽗级属性值的更新会下⾏流动到⼦组件中。
2. 为什么不能⼦组件直接修改⽗组件传来的值呢？⽗组件的值可能会不断发⽣变化，那么如果我们⼦组件对⽗组件传来的值⽐如说 props 有 ⼀个 number，⼦组件收到了 number=1，在收到后，⼦组件直接改变number 的值为 5，去做些事情，但还未做时⽗组件数据更新了，传过
   来⼀个值 3，也就是说⼦组件刚将其变为 5，⽗组件⼜把它变成了 3，可能影响⼦组件的使⽤。说的官⽅⼀些，就是⽗组件的值更新时，⼦ 组件中
   props 的值也会发⽣更新。
3. 在⼦组件中直接⽤ v-model 绑定⽗组件传过来的数据是不合理的，如果希望修改⽗组件传给⼦组件的值： （1）在⼦组件 data 中创建⼀个变量获取 props 中的值，再改变这个 data 中的值。 （2）⼦组件使⽤ $emit
   发出⼀个事件，让⽗组件接收去修改这个值。