test2

webpack的配置及基本运行原理 能分清loader和plugins区别

• 核心概念：entry,output,loader,plugins
• 运行过程：
  • 初始化参数
  • 依照参数初始化编译器对象，注册插件，插件监听构建生命周期的节点，捕获事件执行编译器的run方法进行编译
  • 从配置的entry入口，解析文件构建依赖关系图，根据依赖递归执行
  • 执行过程中，根据配置的loader及rule，执行loader转换，直到所有文件都被递归执行完毕
  • 得到编译后的文件结果，包含模块及对应关系，根据output配置生成bundle
  • 输出文件结果

事件循环

• 异步JS代码会被挂起并加入任务队列，直到执行栈为空时，从任务队列中将代码放入执行栈执行
• 队列中的任务分为宏任务和微任务，script及settimeout属于宏任务，promise.then属于微任务
• 事件循环
• 执行同步代码，宏任务
• 检查任务队列是否有微任务
• 执行微任务
• 更新UI
• 执行任务队列中的异步宏任务

事件模型 捕获冒泡 事件代理

• 事件过程
  • 从document向目标节点捕获，中途遇到绑定的捕获事件会触发
  • 通过
  • 执行目标节点绑定的监听方法
  • 从目标节点冒泡到document，中途遇到绑定的冒泡事件会触发
• 使用event.stopPropagation阻止事件传播，结束事件捕获及冒泡
• event.stopImmediatePropagation在此基础上阻止其他注册事件
• 给同一个节点绑定捕获及冒泡事件，执行顺序依照绑定顺序
• 事件代理
• 需要给多个子元素绑定事件时，可以绑定在父元素上，使用冒泡得到的event.target区分，节省内存

跨域处理 cors

• 浏览器自动实现
• 浏览器发送请求时，如果检测到跨域，会在请求头中添加Origin，包含请求方的协议、域名及端口
• 服务端获取后，可以设置Access-Control-Allow-Origin为此Origin，实现跨域
• 可能对服务器数据产生影响的请求，会先发送一个Options预检请求

原型链 继承的几种方式 静态方法和实例方法

• 每个函数都有prototype属性指向原型
• 除了bind创建的
• 每个对象都有__proto__属性指向创建对象的构造函数的原型；
• 通过__proto__访问对象上不存在的属性，链接成原型链
• 继承
• ES5

    function Parent(foo) {
      this.foo = foo
    }
    Parent.prototype.test1 = function () {
      return `test1`
    }
    function Child(bar) {
      Parent.call(this, bar)
      this.bar = bar
    }
    Child.prototype = Object.create(Parent.prototype)
    Child.prototype.constructor = Child
    Child.prototype.test2 = function () {
      return `test2`
    }
    const child = new Child(1)
    console.log(
      child.foo,// 1
      child.bar,// 1
      child.test1(),// test1
      child.test2(),// test2
    )

• ES6

    class Parent {
      test() {
        return 'test'
      }
    }
    class Child extends Parent { }
    const child = new Child()
    console.log(child.test())// test

vue 的基本原理，响应式说一下大概过程

• 创建vue实例时，遍历data属性，依次使用Object.defineProperty绑定get和set方法，get添加监听及依赖关系，set触发这些监听
• 每个vue实例在mount时，都有一个对应的watcher实例
• vue 3.0 会使用Proxy重构
• 解决无法监听数组索引及长度变更，属性添加删除的问题

通信

• props
• $emit及$on
• provide及inject
• $ref
• $attrs及$listeners

生命周期

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestory
• destoryed

router也看一下

flex布局常用属性

rem及计算

• 相对于html根元素的字体大小
• 可以在页面初始化时修改rem的值，基于屏幕分辨率clientWidth
• 使用webpack loader postcss-pxtorem自动换算