什么是webpack

从官网上的描述我们其实不难理解，webpack的作用其实有以下几点：

• 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。

• 编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。

• 能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

vue组件化的好处

• 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
• 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
• 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

ES6新增的API

• 变量关键字： let 、 const
• 对象的简化写法
• 模板字符串
• 箭头函数
• 函数默认值
• 扩展运算符 ， 解构赋值
• Rest参数
• Symbol类型值
• 生成器（Generator）和 迭代器（Iterator）
• Promise
• Set 和 Map
• Class类
• async 和 await 函数
• BigInt 新的数字类型
• ...

开发环境性能优化

优化打包构建速度

• HMR : 热更新

优化代码调试

• source-map ： 源代码映射错误

生产环境性能优化

优化打包构建速度

• oneOf : 打包文件时不会每次都执行一次 loader
• babel 缓存 : 代码压缩 es6 转 es5
• 多进程打包 thread-loader ： 运行loader时间长时， 可以使用 thread-loader多进程
• externals ： 忽略webpack 不对一些模块进行打包，需要时，手动在html中引入
• dll ： 配置dll， 对webpack引入的库进行打包为一个单独的文件， 用到直接引入，不再重复打包

优化代码运行的性能

• 文件资源缓存 (hash - chunkhash - contenthash) ： 文件生成一个 hash 值，相当于版本号，在运行代码时，根据hash执行加载不同的文件缓存
• tree shaking ： 将源码中没有使用到的代码或模块给移除
• code split ： 代码分割，单文件 多文件，将代码分为多个文件
• 懒加载 / 预加载 ：
• pwa ： 离线也能访问到加载时的内容

vue是什么

用官网的理解来说， Vue是一套用于构建用户页面的渐进式框架。它的设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，易上手，方便整合第三方库。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue的核心

Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点：（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化

Vue靠数据驱动双向绑定是我们开发页面更简单， 开发者不需要手动的去修改DOM 。 Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定底层是通过 Object.defineProperty()定义的数据 set get 函数原理实现

数据驱动 （MVVM）

• Model ： 数据层，仅仅关注数据本身， 不关心任何行为。

  对应vue组件中的data, props属性

• View ： 视图层， 用户操作页面， 当 view-mode 对 model 更新的时候， 会通过数据绑定更新到view。

  对应vue组件中的 template 和 style 的部分

• View Model : 业务逻辑层， view 需要什么数据，View Model 就提供什么数据， view 有那些操作，View Model就要相应那些操作，View和ViewModel两种交互方式：双向数据传递（数据属性和data binding）和单向传递操作（命令属性）；由于ViewModel的双向数据绑定，当Model发生变化时，ViewModel就会更新，ViewModel变化，Model也会更新。

  对应继承Vue类的组件实例

组件化

1. 什么是组件化，组件化就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件。

   2. 组件化的优势

   • 组件化开发指的是将复杂的业务拆分为一个有一个的组件

   • 组件化开发的组件一般来说要灵活

指定系统

解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

• vue中常用的指令
  • 条件渲染 v-if
  • 列表渲染 v-for
  • 属性绑定 v-bind
  • 事件绑定 v-on
  • 双向数据绑定 v-model

没有指令之前我们是怎么做的？是不是先要获取到DOM然后再....干点啥

webpack优点

• 模块化开发，使用 import、require 来进行模块化开发。
• 支持新语法，自由的使用 JS、CSS 等语言的新语法。例如 SASS、Less、TypeScript
• 主流框架的支持， 像Vue 脚手架 vue-cli、React 脚手架 creact-react-app等，学习webpack后，可以更灵活的配置脚手架
• 拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置
• webpack 扩展性强，插件机制完善，开发者可自定义插件、loader
• webpack 社区庞大，更新速度快，轮子丰富

hash

• hash 每次webpack 构建时都会生成一个唯一的 hash 值
• 问题： 因为 js 和 css 同时使用一个 hash 值。 如果重新打包，会导致所有的缓存失效。 （可能我只修改了一个文件）

chunkhash

• chunkhash 是根据 chunk 生成的 hash 值。 如果打包来源于同一个chunk （打包来源于同一个文件）, 那么hash 值就一样
• 问题： 在 js 文件中引入的 css 文件的 hash 值一样。 因为 css 是在 js 中被引入的， 所以属于一个 chunk

contenthash

• contenthash 是根据文件的内容生成 hash 值。 不同文件的 hash 值 一定不一样。

在vue开发的SPA页面中，稍微复杂的页面都会需要到路由。vue-router 共有三种路由模式 hash 和 history, abstract

hash 模式

hash 模式其实就是把前端路由路由使用 #号拼接到真实的url后面的模式。当 #后面的路径发生变化时， 浏览器不会重新发起请求，而是会触发 onhashchange 事件

hash 模式的特点

• hash值的变化会触发页面跳转，也就是浏览器的前进和后退
• hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面。也就是说，所有页面的跳转都是在客户端进行操作。因此，这并不算是一次 http 请求，所以这种模式不利于 SEO 优化。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url 。
• hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。
• hash 永远不会提交到 server 端（可以理解为只在前端自生自灭）。

history模式

history API 是 H5 提供的特性，允许开发者直接更改前端路由，也就是更新浏览器的url地址，不会重新发起请求

history的特点

对于 history 来说，主要有以下特点：

• 新的 url 可以是与当前 url 同源的任意 url ，也可以是与当前 url 一样的地址，但是这样会导致的一个问题是，会把重复的这一次操作记录到栈当中。
• 通过 history.state ，添加任意类型的数据到记录中。可以额外设置 title 属性，以便后续使用。
• 通过 pushState 、 replaceState 来实现无刷新跳转的功能。

说下var、let和const有什么区别？

• var , let 都是可以定义变量的，
• const 定义常量，而且必须要赋值，不能修改
• let, const 具有块级作用域， 不能重复声明， 不存在变量的提升
• let, const , var 都受函数作用域的限制

Vue3中watch监视属性几个注意点

• watch监视多个 ref 定义的响应式数据，数据改变时， 出现newVal和oldVal一样， oldValue无法正确获取
• watch在监视 reactive 定义的响应式数据时，出现newVal和oldVal一样， oldValue无法正确获取
• watch监视 reactive 定义的响应式，强制开启深度监视（deep:true），并且无法关闭

监视reactive 定义响应式对象时的几个注意点

想单独监视对象中的某一个属性，必须要使用 函数 return的方式写

watch(() => names.age, (newVal, oldVal) => {  // 不能这样names.age单独监视对象属性
  console.log(`name.age改变了`, newVal, oldVal)
}, {deep: true})

监视对象多个属性

不会出现ref监视多个属性时候，不会出现newVal和oldVal 一样的情况 ， 这是能够完全达到监视的目的

watch([() => names.age, () => names.familyName], (newVal, oldVal) => {
  console.log(`name.age改变了`, newVal, oldVal)
}, {deep: true})

监视深度属性

//第一种
watch(()=> names.job.salary,(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
})
//第二种
watch(()=> names.job,(newValue,oldValue)=>{
  console.log('names改变了',newValue,oldValue)
},{deep:true})

对vue的理解

官网的解释： vue是一个创建用户界面的渐进式JavaScript框架， 也是创建单页面应用的Web框架。

vue的核心

• 数据驱动
• 组件化
• 指令系统

数据驱动使用 MVVM 模型

• Model：模型层，负责处理业务逻辑以及和服务器端进行交互
• View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
• ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

组件化

Vue把图形，非图形的各种逻辑均抽象为一个统一的概念 (组件) 来实现开发模式。
在Vue中把每一个 .vue 文件看做一个组件

指令系统

在vue中具有自己的指令系统，带有 v- 开头的一些指令。能够更方便的获取和操作DOM

vue 和其他传统的开发的区别

• Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
• Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM

• 箭头函数和普通函数的样式不同，箭头函数语法更简介、清晰、是以 => 定义函数。普通函数是以 function 定义函数
• 箭头函数没有this， 箭头函数中的this取决于调用箭头函数的第一个普通函数的this
• 箭头函数没有自己的 arguments 。在箭头函数中访问了 arguments ， 实际上获得的外部局部函数执行中的值
• call apply bind 并不会影响箭头函数的 this 指向
• 箭头函数的 this 指向上下文，而普通函数的 this 并非指向上下文， 需要时加入 bind(this)

1. ref 用来定义 基本类型
2. ref 底层通过 Object.defineProperty()的 get 于 set 来实现响应式 (数据劫持)
3. ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
4. reactive用来定义：对象或数组类型数据。
5. reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源代码内部的数据。
6. reactive定义的数据：操作数据与读取数据：均不需要.value。

ref可以定义对象或数组的，它只是内部自动调用了reactive来转换。

Vue的父组件和子组件的生命周期执行顺序

• 首次加载渲染过程： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
• 子组件更新过程： 父beforeUpdate-> 子beforeUpdate -> 子updated -> 父updated
• 父组件更新过程：父beforeUpdate -> 父updated
• 销毁过程：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

这样做的好处是

• 更容易被搜索引擎收录
• 更容易让屏幕阅读器读出网页内容
• 能够更好的体现页面主题
• 兼容性更好
• 增强代码的可读性

使用new调用类的构造函数时，执行的操作

1. 在内存中创建一个新对象
2. 这个新对象内部的 [[Prototype]] 指针被赋值为构造函数的prototype 属性
3. 构造函数内部的 this 被赋值为这个新对象 （即this 指向新对象）
4. 执行构造函数内部代码 （给新对象添加属性）
5. 如果构造函数返回空对象， 则返回该对象；否则，返回刚创建的新对象

防抖：在第一次触发事件时，不立即执行函数，而是给出一个时间段，如果短时间内大量触发同一事件，只会执行一次函数。

节流：函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活，如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再生效，直至过了这段时间才重新生效。

对于防抖和节流一个最主观的判断方法就是：在10s内你疯狂点击一个按钮，如果使用了防抖则会只执行一次，而你使用了节流则会每隔一段时间执行一次，这个时间可以自己来掌控。

• 参考： https://juejin.cn/post/7016502001911463950#heading-0

webpack打包的流程

1. 读取 webpack 参数配置
2. 启动 webpack ，创建 Compiler 对象并开始解析项目
3. 从入口文件 entry 开始解析，并找到其导入的模块，递归遍历分析，形成依赖树
4. 对不同的文件类型的依赖模块文件使用对应的 Loader 进行编译，最终转为 JavaScript文件
5. 整个过程中 webpack 会通过发布订阅模式， 向外抛出一些 hooks , 而 webpack 插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

其中文件的解析与构建是一个比较复杂的过程，在webpack源码中主要依赖于compiler 和compilation两个核心对象实现。

compiler对象是一个全局单例，他负责把控整个webpack打包的构建流程。
compilation对象是每一次构建的上下文对象，它包含了当次构建所需要的所有信息，每次热更新和重新构建，compiler都会重新生成一个新的compilation对象，负责此次更新的构建过程。