开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情
START
前言
这几天看了一些文章和问题，前端已死这个字样出现频率高达99%。搞得人心惶惶，没有啥动力。但是思前想后，再试试吧，也不能躺尸，不能比现在更差了吧也。
- 解释是什么的问题。
- 解释这个技术的应用点、应用场景在哪里。
- 整理一下这个问题的优缺点是什么。
1、事件循环的机制了解吗？宏任务和微任务的执行顺序是怎样的？
- JavaScript是单线程，所以当我们运行代码的时候，只能一行一行的运行，如果遇到代码错误，则会终止运行，下面的代码也不运行。
- js代码又分为同步代码，异步代码，在js里先执行同步代码，再执行异步代码。js代码是在执行栈里面执行，当同步代码在栈里执行过程中，遇到异步代码，会把异步代码分别放在对应的消息队列里面，直至同步代码执行完毕
- 异步代码又分为微任务，宏任务。微任务>宏任务，所以同步代码执行完之后会先执行微任务，因为是队列，所以微任务是先进先出原则，执行完微任务才去执行宏任务，若执行完宏任务之后，微任务还存在，继续循环执行，直至所有的任务均完成，这就是时间循环
- 微任务包括：- `Process.nextTick`（Node独有）、`Promise.then()`、`Object.observe`(废弃)、`MutationObserver`。
- 宏任务包括：`script整段同步代码可以看做是一个宏任务`；`setTimeout`，`setInterval`，`I/O`、`UI Rendering`
- 执行顺序：同步代码>微任务>宏任务
2、怎么理解闭包这个定义的，在平时工作中有用到闭包的使用吗，举个例子。
- （解释问题是什么？）闭包是：能够访问其他函数内部变量的函数。
- （解释这个技术的应用点，应用场景）闭包一般会在：封装模块的时候，通过函数自执行函数的方式进行实现；或者在模仿块级作用域的时候实现；如：我们常用的库jQuery本身就是一个大的闭包。
- （说一下优缺点）闭包的优点是：
- 能够在离开函数之后继续访问该函数的变量，变量一直保存在内存中。
- 闭包中的变量是私有的，只有闭包函数才有权限访问它。不会被外面的变量和方法给污染。
- 闭包的缺点是：
- 会增加对内存的使用量，影响性能。
- 不正确的使用闭包会造成内存泄漏。
3、vue组件间的哪些通信方式？
- props: 父组件传递给子组件
- $emit/on: 子组件传递给父组件
- attrs/listeners: 后代组件可以获取祖先组件中非props的参数
- provide/inject: provide在祖先组件传递参数；inject接收参数[],多少层都可以接收到
- vuex: vue的状态管理库
4、一个父组件潜嵌套了子组件，他的生命周期函数顺序是怎么执行的？
- 挂载阶段：beforeCreate父--created父--beforeMount父--beforeCreate子--created子--beforeMount子--mounted子--mounted父
- 更新阶段：beforeUpdate父--beforeUpdate子--updated子-- updated父
- 卸载阶段：beforeDestroy父--beforeDestroy子--destroyed子--destroyed父
5、vue的权限管理应该怎么做？路由级和按钮级分别怎么处理？
- （解释问题是什么？）所谓权限管理就是：不同用户有不同的页面展示，不同用户访问有各自的限制
- （解释这个技术的应用点，应用场景）主要是在`路由`，`视图（菜单）`，`接口`,`按钮`四个方面进行控制。可以由前端控制展示；也可以使用后端根据登录用户权限返回对应的路由及其他。
- （说一下优缺点）
- （路由+按钮）由前端控制
- 优点：快
- 缺点：需要全部加载，再根据权限筛选，浪费加载时间，浪费资源
- （路由+按钮）由后端控制
- 优点：可以根据登录账号的权限筛选路由，按钮，菜单，统一返回给前端。
- 缺点：必须要在权限管理系统中做配置，因为菜单和页面要一一对应。
6、说一下你对虚拟DOM的理解
- （解释问题是什么？）虚拟dom就是用js对象来表示dom元素节点，不是真实的dom,但是与真实的dom一一对应。
- （解释这个技术的应用点，应用场景）虚拟dom目前应用在vue框架，react框架中，这种应用可以有效的在大型项目中提高代码的渲染效率。通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作， 经过diff算法得出一些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能。
- （说一下优缺点）
- 优点：可以提高渲染效率；具有跨平台的优势；在框架里面 不用手动操作dom
- 缺点：并不是所有的都可以适用于虚拟dom,无法进行极致优化,层次深时，解析也很慢
7、了解diff算法吗？vue的diff算法是怎样的一个过程
- （解释问题是什么）
- diff算法是一种通过同层的树节点进行比较的高效算法；
- （解释这个技术的应用点，应用场景）
- 他的比较只会在同层级进行，不会跨层级比较；
- 在diff比较的过程中，循环从两边向中间比较。
- diff可以用在**虚拟DOM**更新时的新老虚拟节点比较的过程中。
- **①新前与旧前** **②新后与旧后** **③新后与旧前** **④新前与旧后**
8、能说一下v-for中key的作用吗？
- （解释问题是什么？）
- key的作用：高效更新虚拟dom
- （解释这个技术的应用点，应用场景）
- 主要应用于diff比较中，用于新dom和旧dom的比较，可以减少一些元素的创建和删除，可以大大提高效率
- （说一下优缺点）
- 尽量使用数据的id值作为key值，否则使用index作为会出现index不起作用的效果，还是跟没写一样
9、做过vue项目哪些性能方面的优化？
- （解释问题是什么？）
- vue优化可以由三个方面进行：①代码方面②webpack③基础的web层面
- （解释这个技术的应用点，应用场景）
- `①代码方面`
- 1. v-if v-for不要一起用
- 2. 适当使用computed
- 3. v-for 加key,且使用id
- 4. 离开页面，销毁不用的定时器等
- 5. 图片懒加载，路由懒加载，列表分页查询
- 6. 骨架屏，增加加载状态
- 7. 预渲染
- `②webpack`
- 图片压缩
- 优化sourcemap
- 内容hash
- babel转化必要的代码
- `基础的web层面`
- 开启gzip压缩
- 使用cdn
- 浏览器缓存
- ...
10、vue组件为什么只能有一个根元素？
- 因为从效率上讲，如果逻辑抽象树有多个根，那么就会产生多个入口，这对于 遍历、查找、比较 都不方便。
11、如何实现路由懒加载呢？
- import：`const Login = () => import('@/components/Login');component: Login`
- webpack: `component: ()=>import(/*webpackChunkName:"ImportFuncDemo"*/,'../compontents/Login')}`
- 异步：`component:resolve => require(['@/components/Login'],resolve)}`
END
见下一篇：review2
