m0_73882020的博客

原创 箭头函数跟普通函数的区别

箭头函数提供了更简洁的语法，并且在this绑定、构造函数以及arguments对象方面有不同的行为。它们适用于需要词法作用域的场景，如回调函数和事件处理程序。普通函数提供了传统的函数功能，能够动态绑定this，作为构造函数使用，并且支持arguments对象。适用于需要这些功能的场景。

原创 map跟set的区别和共性

Map是键值对集合，适用于需要存储和操作键值对的场景，支持任何类型的键。Set是唯一值的集合，适用于需要保证值唯一的场景，主要存储单一类型的值。两者都有用于存储和操作数据的特性，但其用途和操作方式根据实际需求的不同而有所区别。

原创 vue3和vue2的双向绑定原理

Vue 2使用来实现响应式数据，通过 getter 和 setter 机制拦截数据操作，结合数据绑定指令（如v-model）实现双向绑定。Vue 3使用Proxy来实现响应式系统，提供了更全面和高效的响应式能力。同时，v-model的实现也进行了改进，支持更多功能和自定义选项。Vue 3 的响应式系统和双向绑定机制在性能和灵活性上都有显著提升，使得 Vue 3 在处理复杂数据绑定和响应式逻辑时表现更加优秀。

原创 Vue2 中对数组进行操作时需要注意什么

在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。

原创 Vue2 与 Vue3 的区别有哪些

Vue 3 在性能、功能、API 设计等方面相比 Vue 2 都有显著改进和优化。它提供了更高效的响应式系统、更灵活的组件逻辑管理、更强大的 TypeScript 支持等功能，使得开发者可以更高效地构建现代化的 Web 应用。

原创 Vue 中 nextTick 的最主要作用是什么，为什么要有这个 API

nextTick是 Vue 提供的一个重要 API，用于在 DOM 更新完成后执行特定的逻辑。它解决了异步 DOM 更新带来的问题，使得代码可以在数据变化后正确地处理和访问 DOM，从而提高了 Vue 应用的稳定性和响应能力。

原创 前端性能优化

前端性能优化是提升网页加载速度和用户体验的关键。优化可以从多个方面着手，包括资源管理、代码优化、网络请求优化等。

原创 Flexbox

Flexbox（弹性布局）是 CSS3 的一套布局模式，用于在容器中分配空间并对齐内容，特别是当大小不确定或者容器的空间是动态的时。它非常适合处理复杂的布局要求，如响应式设计和中心对齐等。

原创 vue2/3响应式原理区别

在 Vue.js 中，响应式系统是实现数据绑定和视图更新的核心机制。

原创 http和https区别

HTTP（超文本传输协议）和 HTTPS（安全超文本传输协议）是用于在互联网上传输数据的协议。简而言之，HTTPS 提供了更高的安全性，保护用户的数据不被窃取或篡改，而 HTTP 则不提供这种保护。

原创 vue更新的细粒度

Vue 的细粒度更新通过响应式系统、虚拟 DOM 和异步更新机制，确保只更新那些真正需要更新的部分，从而大大提高了性能。了解和利用这些机制可以帮助你构建更加高效、响应迅速的 Vue 应用。

原创 webpack中1个文件修改会全部更新吗

在开发模式下，Webpack 通过 HMR 只更新受影响的模块，不会更新整个应用。在生产模式下，Webpack 通过代码分割和缓存，只重新打包受影响的 chunk，而不重新打包整个项目。因此，Webpack 修改一个文件后并不会导致整个项目的所有文件都被重新更新或重新打包。它有很多优化手段来尽可能减少构建时间和输出文件的更新量。

原创 webpack和vite分别是什么，优势

适合复杂、庞大的项目，尤其是需要复杂构建流程和高度定制化需求的场景。它的插件和 loader 生态系统非常强大，但需要较高的配置成本。

原创 导致页面加载白屏时间长的原因有哪些，怎么进行优化？

白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。

原创 webpack打包后输入url第一个访问到的是什么

第一个访问到的资源：通常是 Webpack 打包生成的 HTML 文件。后续加载的资源：由 HTML 文件中引用的 JavaScript、CSS 和其他静态资源。

原创 webpack打包构建和项目部署流程

这个流程涵盖了从开发到上线的主要步骤。具体细节可能会因项目的复杂性和需求不同而有所调整。

原创 CSS3-新特性

3.伪元素选择器（重点）

原创 css-元素的显示与隐藏

【代码】css-元素的显示与隐藏。

原创 css-定位

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

原创 网页布局总结

原创 盒子模型

1. 盒子模型（Box Model）组成2.边框（border）表格的细线边框边框会影响盒子实际大小3.内边距（padding）内边距会影响盒子实际大小应用场景---导航栏（不设宽高度）4.外边距（margin）应用场景外边距合并1. 相邻块元素垂直外边距的合并2. 嵌套块元素垂直外边距的塌陷清除内外边距

原创 常见的图片格式

原创 css-浮动

不再保留原先的位置。

原创 css属性总结

主要用于让块级元素内的行内元素或行内块元素内容水平居中。

原创 文字、行内元素、行内块元素、块元素水平垂直居中

这些方法可以单独或组合使用，根据具体的元素类型和布局需求来选择最合适的方式。可以让它们在同一行中相对于基线垂直居中。

原创 02-three.js-坐标辅助器和轨道控制器

运行结果（结合01+坐标辅助器）

原创 01-three.js+vue(一个例子）

【代码】three+vue(一个例子）

原创 HTTP响应状态码

TTP 响应状态码用于表示服务器响应客户端请求的结果。状态码分为五个类别，每个类别表示不同类型的响应。

原创 什么是虚拟DOM？如何实现一个虚拟DOM？

虚拟DOM（Virtual DOM）是一个轻量级的JavaScript对象，它表示DOM树的结构。虚拟DOM是对真实DOM的一种抽象表示，旨在提高页面的更新性能。通过对虚拟DOM进行操作，再将变化应用到真实DOM，框架可以最小化直接操作真实DOM的开销，从而提高性能。定义虚拟DOM节点的数据结构。编写渲染函数将虚拟DOM转化为真实DOM。实现diff算法比较新旧虚拟DOM树。应用diff结果更新真实DOM。通过上述步骤，可以实现一个简单的虚拟DOM系统，了解其基本原理和工作机制。

原创 事件循环-

事件循环（Event Loop）是JavaScript运行时（例如浏览器或Node.js）的一种机制，用于处理异步编程。它允许非阻塞操作，即使在某些任务需要等待（如网络请求或定时器），JavaScript也可以继续执行其他代码。

原创 Vue.js实例挂载过程发生什么？

Vue.js实例挂载（mounting）是指将Vue实例与DOM元素关联的过程。

原创 svg图标的使用----vue3

在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件。因为项目很多模块需要使用图标,因此把它封装为全局组件！

原创 包管理器

一些优势：比同类工具快2倍左右、节省磁盘空间... https://www.pnpm.cn/安装方式：npm install -g pnpm。创建项目：pnpm create vue。pnpm 包管理器 - 创建项目。

原创 vue3 ----- Pinia

编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致。

原创 vue3~

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法Vue3的生命周期API （选项式 VS 组合式）defineProps 原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换通过ref标识获取真实的dom对象或者组件实例对象顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。

原创 ESlint 代码规范

JavaScript Standard Style 规范说明: https://standardjs.com/rules-zhcn.html。

原创 vue2 ---- 路由

Vue中路由：路径 和 组件 的 映射 关系。

原创 vue2 ---- 插槽（组件自定义）

作用：让组件内部的一些 结构 支持 自定义插槽基本语法：1. 组件内需要定制的结构部分，改用占位2. 使用组件时, 标签内部, 传入结构替换slot。

原创 vue ---- 自定义指令

使用局部注册方法① v-指令名 = "指令值" ，通过 等号 可以绑定指令的值② 通过 binding.value 可以拿到指令的值③ 通过 update 钩子，可以监听指令值的变化，进行dom更新操作。

原创 vue2 --- watch 侦听器（监视器）

(2) immediate: true 初始化立刻执行一次handler方法。作用：监视数据变化，执行一些 业务逻辑 或 异步操作。(1) deep: true 对复杂类型深度监视。① 简单写法 → 简单类型数据，直接监视。② 完整写法 → 添加额外配置项。