VUE基础面试题（三）vue最后补充+部分JavaScript面试题

VUE部分

Vue的优点

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势；
• 简单易学：由国人开发，中文文档，不存在语言障碍 ，易于理解和学习。

什么是单页应用？

1. 单页应用的全称是 Single Page Application，简称 SPA，通过路由的变更，局部切换网页内容取代整个页面的刷新操作；
2. 三大框架 React、Vue、Angular 均采用单页应用模式；
3. 优点：用户操作体验好，用户不用刷新页面；局部更新, 对服务器压力小；良好的前后端分离，后端不再负责页面渲染和输出工作。
4. 缺点：首次加载耗时长, 速度慢；SEO不友好, 需要采用 prerender 服务进行完善。

说说对SPA单页面的理解，它的优缺点分别是什么？

• SPA（ single page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS；
• 一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；
• 而页面的变化是利用路由机制实现 HTML 内容的变换，避免页面的重新加载。

优点：

• 用户体验好，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
• 减少了不必要的跳转和重复渲染，这样相对减轻了服务器的压力；
• 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理。

缺点：

• 初次加载耗时多；
• 不能使用浏览器的前进后退功能，由于单页应用在一个页面中显示所有的内容，所以，无法前进后退；
• 不利于搜索引擎检索：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

vue的单页面应用（SPA）的优缺点

• 优点：Vue是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统；组件化开发、轻量、简洁、高效、快速、模块友好。
• 缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

SPA首屏加载速度慢的怎么解决？

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容；

加载慢的原因：

• 网络延时问题
• 资源体积是否过大
• 资源是否重复发送请求进行了多次加载
• 加载脚本的时候，渲染内容堵塞了

优化方式：

• 减小入口文件体积
• 静态资源采用本地缓存
• UI框架按需加载
• 图片资源压缩，或者使用精灵图
• 组件重复打包
• 开启GZip压缩
• 使用SSR

具体优化方法：

1. 将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度；
2. 在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；
3. 添加首屏 loading图，提升用户体验。

Vue权限管理

整体思路：

​ 后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛 选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。

具体思路：

1. 路由定义，分为初始路由和动态路由，一般来说初始路由只有 login，其他路由都挂载在 home 路由之下 需要动态挂载；
2. 用户登录，登录成功之后得到 token，保存在 sessionStorage，跳转到 home，此时会进入路由拦截根 据 token 获取用户权限列表；
3. 全局路由拦截，根据当前用户有没有 token 和 权限列表进行相应的判断和跳转，当没有 token 时跳到 login，当有 token 而没有权限列表时去发请求获取权限等等逻辑；
4. 使用 Vuex 管理路由表, 根据 Vuex 动态渲染侧边栏组件。

JavaScript部分

JQuery一个对象可以同时绑定多个事件，这是如何实现的？

jQuery可以给一个对象同时绑定多个事件，底层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。

什么是webkit， 怎么用浏览器的各种工具来调试代码

Webkit是浏览器引擎，包括html渲染和js解析功能，手机浏览器的主流内核，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。

对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js调试工具使用，熟练使用这些工具可以快速提高解决问题的效率。

前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

Web模板引擎是为了使用户界面与业务数据（内容）分离而产生的；

• Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在JavaScript、PHP、Python、Perl 等多种编程语言中。
• Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。
• Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。

Promise 和async/await的区别

区别主要在于按顺序调用多个异步函数时的写法和错误获取：

1. Promise

   ajax().then(func1).then(func2).then(func3).then(func4)
   

2. async/await方式

   
   async function demo(){
    await res = ajax();
    await res = func1(res);
    await res = func2(res);
    await res = func3(res);
    await res = func4(res);
    }
   

• 当遇到多个异步函数时 Promise 方式需要很多 .then，这样会导致代码不易读且结构复杂；
• await/async 方式让异步代码的格式与同步代码一样更易读。
• 报错读取 Promise 使用 .catch 捕获异常，await/async 使用 try…catch… 方式抓取报错。

这里是万物之恋，我门下次再见了！