开始前首先贴上个人看到的比较好的一些讲述了vue底层原理的文章，大佬们写的非常详细，由浅入深。本系列是站在各位大佬的肩膀上进行的一个总结。 纯干货！图解Vue响应式原理 - 掘金 (juejin.cn) https://juejin.cn/user/2647279730694029/posts https://juejin.cn/post/7076002091570823181#headin...

方式1：使用requestAnimationFrame 不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次 在渲染大量数据时，避免一次性将所有数据都渲染出来可以提高性能，以保持界面的流畅性。以下是一个示例代码，演示如何使用requestAnimationFrame来分批渲染大量数据，避免卡住界面：...

图片懒加载的原理是没有在可视区域的图片暂时不加载图片，等进入可视区域后在加载图片，这样可以减少初始页面加载的图片数量而提升页面加载速度。 图片懒加载在提升页面加载速度的同时也会伴随用户看其他未展示的图片时会有等待时间；图片加载显示会伴有布局抖动等问题。 方案图片懒加载的关键是：判断一个元素是否在可视区域。 img的loading属性设为“lazy” HTMLImageElement 的 lo...

发布订阅、观察者设计模式观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新 观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯 实现代码如下： 被观察者模式 123456789101112131415161718class Subject { const...

概念定义： 用于定义基本操作的自定义行为，用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等） 本质： 修改的是程序默认形为，就形同于在编程语言层面上做修改，属于元编程(meta programming) 元编程（Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的数据，或者在运...

提取css代码 要求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中 需要：mini-css-extract-plugin 插件来实现 步骤： 下载 mini-css-extract-plugin 插件软件包到本地项目中 1npm i --save-dev mini-css-extract-plugin 配置 webpack.config....

打包模式告知 Webpack 使用相应模式的内置优化 分类： 模式名称 模式名字 特点 场景 开发模式 development 调试代码，实时加载，模块热替换等 本地开发 生产模式 production 压缩代码，资源优化，更轻量等 打包上线 如何设置影响 Webpack呢？ 方式1：在 webpack.config.js 配置文件设置 mode 选项1234modul...

概念 Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包 Webpack 的作用：把静态模块内容，压缩，整和，转译等（前端工程化） 把 less/sass 转成 css 代码 把 ES6+...

模块化简介 在 Node.js 中每个文件都被当做是一个独立的模块，模块内定义的变量和函数都是独立作用域的，因为 Node.js 在执行模块代码时，将使用如下所示的函数封装器对其进行封装 而且项目是由多个模块组成的，每个模块之间都是独立的，而且提高模块代码复用性，按需加载，独立作用域 但是因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准...

简介 npm 简介链接： 软件包管理器，用于下载和管理 Node.js 环境中的软件包 npm 使用步骤： 初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令） 注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线 下载软件包：npm i 软件包...