一、刷题
二、源码
三、知识点总结
1、webpack 知识点
- 1.1 常用loader
vue-loader、style-loader、css-loader、ts-loader、babel-loader、post-css-loader、sass-loader、less-loader、thread-loader
- 1.2 常用plugin
define-plugin // 定义变量
html-webpack-plugin // 设置入口静态文件 静态链接注入
compression-plugin // 开启gzip
minicss-extract-plugin // 设置css hash 值
clear-webpack-plugin // 清空dist目录
- 1.3 webpack执行
从命令行和配置文件 获取到配置信息
然后生成 complie 对象
之后加载 插件plugin
然后开始从入口文件递归调用loader进行编译
然后生成一个个chuck
然后再根据配置的输入文件路径 输出到文件系统中
- 1.4 webpack 和 vite的区别
webpack
1、先编译打包后运行
2、需要配置很多loader和plugin 配置复杂
3、热更新 需要将那个模块的所有依赖项编译一遍
vite
先运行后打包
使用了go 写的esbuild 进行编译更新
热更新 通过socket通知浏览器 重新请求该模块就行
开包即用
vue3面试点
vue3 和 vue2 对比
vue3
- 组合式API
- 使用了 Proxy 对数据进行惰性监听 定义使用 ref 或 reactive 定义响应式数据
惰性监听解释：只有当访问到响应式数据时才会进行监听，而不是在初始化时就监听所有数据;
ref 和 reactive 的区别:
1 ref 可以定义基本类型和对象
2 核心：就是 ref 会判断类型如果是对象就用reactive 定义响应式 如果是基本类型就用 class 的 get set 定义响应式。
3 reactive 定义只能对象- 支持Typescript 类型检查
- 使用了Tree Shaking 优化了打包体积
- 新增了 Fragment 组件 可以返回多个根节点
- 新增了 Teleport 组件 可以将组件渲染到指定的 DOM 节点
- 新增了 Suspense 异步组件 可以在组件加载前和加载后显示不同的内容
- diff 算法优化
- 1、使用了最长递增子序列 优化了虚拟 dom 对比过程，只对比相同标签名的节点，减少了对比次数
- 2、使用了静态标记 优化了静态节点的对比过程，减少了对比次数
- 3、使用了静态模板提升 优化了静态节点的渲染过程，减少了渲染次数
- 4、使用了事件缓存 减少了事件绑定次数
- 5、给列表添加了唯一 key 属性 优化了列表渲染过程，减少了渲染次数
vue2
- 选项式API
- 使用Object.defineProperty 对data 里面的对象属性进行递归监听
vue3生命周期
setup 函数在组件实例创建之前调用
onBeforeMount 函数在组件实例挂载之前调用
onMounted 函数在实例挂载之后调用
onBeforeUpdate 函数在组件更新之前调用
onUpdated 函数在组件更新之后调用
onBeforeUnmount 函数在组件实例卸载之前调用
onUnmounted 函数在组件实例卸载之后调用
vue3组件通信
props + emits 父子组件通信
provide + inject 跨组件通信
eventBus 事件总线通信
parent 访问父组件实例
$children 访问子组件实例
Pinia 状态管理
Tree Shaking 优化的原理
1、使用了 ES6的模块静态性 可以在编译的时候就确定模块的依赖关系
2、只保留被使用的代码
3、移除未使用的代码
小程序的生命周期
onLoad -> onShow -> onReady -> onHide -> onUnload
对称加密和非对称加密的区别
对称加密：加解密使用同一套密钥，速度快。常用于接口传输数据加密 非对称加密：分为公钥和私钥，公钥可公开，速度慢，安全性更高。常用于加密重要的数据 比如签名之类的
遇到考 var 和 function 同名的题
记住：function 会在运行的时候提到最上面 然后被 var 定义的覆盖掉
遇到考 promise 和 setTimeout 的题
先执行同步代码按顺序从上往下(包括 new Promise 里的代码) 然后执行微任务代码 then 和 watch 里的代码 然后再执行 宏任务setTimeout 里面的代码
页面首屏时间长的原因
原因：
1、CSS加载时间过长 导致的
2、JS加载时间过长或执行过长或者报错 导致的
解决方法
添加DNS预解析
首屏CSS 优先加载 或 直接把首屏样式写入html
减少css js 文件体积 就是分包
