华云

一,vue路由守卫的生命周期
1,全局的前置路由守卫 router.beforeEach()
2, 全局解析守卫 router.beforeResolve
完整的导航解析流程:
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
导航守卫
二,nextTick原理
Vue你不得不知道的异步更新机制和nextTick原理

三,js原型链?实现一个继承
只要是对象就是有构造函数来创建的,并且内部二个属性是从构造函数的prototype衍生的一个指向,而构造函数的prototype也是一个对象,那么它应该肯定也有一个构造函数,首先它是一个Object {} 对象,那么它的构造函数肯定是Object,所以就会有一个指针proto指向Object.prototype。最后Object.prototype因为没有proto,指向null,这样就构成了一个原型链。
原型继承的实现
四,如何将一个普通css转成scss,less
五,webpack原理
1、核心概念

(1)entry:一个可执行模块或者库的入口。

(2)chunk:多个文件组成一个代码块。可以将可执行的模块和他所依赖的模块组合成一个chunk,这是打包。

(3)loader:文件转换器。例如把es6转为es5,scss转为css等

(4)plugin:扩展webpack功能的插件。在webpack构建的生命周期节点上加入扩展hook,添加功能。

2、webpack构建流程(原理)

从启动构建到输出结果一系列过程:

(1)初始化参数:解析webpack配置参数,合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果。

(2)开始编译:上一步得到的参数初始化compiler对象,注册所有配置的插件,插件监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的 run 方法开始执行编译。

(3)确定入口:从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去。

(4)编译模块:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

(5)完成模块编译并输出:递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据entry配置生成代码块chunk。

(6)输出完成:输出所有的chunk到文件系统。

注意:在构建生命周期中有一系列插件在做合适的时机做合适事情,比如UglifyPlugin会在loader转换递归完对结果使用UglifyJs压缩覆盖之前的结果。
webpack系列--浅析webpack的原理

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. HTML 1. 必考:你是如何理解 HTML 语义化的? 荒野阶段:最开始是 PHP 后端写 HTML,不会...
    Qingelin阅读 712评论 0 0
  • 一、Web端 https://www.nowcoder.com/discuss/588372 1.float如何清...
    陈一季阅读 4,368评论 2 18
  • 一、CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果...
    陈二狗想吃肉阅读 642评论 0 9
  • 1.什么是vue的生命周期? Vue实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、...
    陈二狗想吃肉阅读 533评论 0 0
  • 推荐指数: 6.0 书籍主旨关键词:特权、焦点、注意力、语言联想、情景联想 观点: 1.统计学现在叫数据分析,社会...
    Jenaral阅读 5,753评论 0 5