陈Sir - 欢迎来到陈Sir的学习博客

发表于2025-03-22|基础知识

1. Vue3简介 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n 经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址：Release v3.0.0 One Piece · vuejs/core 截止2023年10月，最新的公开版本为：3.3.4 1.1. 【性能的提升】打包大小减少41%。初次渲染快55%, 更新渲染快133%。内存减少54%。 1.2.【源码的升级】使用Proxy代替defineProperty实现响应式。重写虚拟DOM的实现和Tree-Shaking。 1.3. 【拥抱TypeScript】 Vue3可以更好的支持TypeScript。 1.4. 【新的特性】 Composition API（组合API）： setup ref与reactive computed与watch …… 新的内置组件： Fragment Teleport Suspense …… 其他改变：新的生命周期钩子 data 选项应始终被声明为一个函数移除keyCode支持作为v-on 的修饰符 …… 2. 创建Vue3工程2.1. 【基于 vue-cli 创建】点击查看官方文档备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。 1234567891011121314151617## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/cli npm install -g @vue/cli## 执行创建命令vue create vue_test## 随后选择3.x## Choose a version of Vue.js that you want to start the project with (Use arrow keys)## > 3.x## 2.x## 启动cd vue_testnpm run serve 2.2. 【基于 vite 创建】(推荐)vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：轻量快速的热重载（HMR），能实现极速的服务启动。对 TypeScript、JSX、CSS 等支持开箱即用。真正的按需编译，不再等待整个应用编译完成。 webpack构建与 vite构建对比图如下：具体操作如下（点击查看官方文档） 12345678910111213141516171819202122## 1.创建命令npm create vue@latest## 2.具体配置## 配置项目名称√ Project name: vue3_test## 是否添加TypeScript支持√ Add TypeScript? Yes## 是否添加JSX支持√ Add JSX Support? No## 是否添加路由环境√ Add Vue Router for Single Page Application development? No## 是否添加pinia环境√ Add Pinia for state management? No## 是否添加单元测试√ Add Vitest for Unit Testing? No## 是否添加端到端测试方案√ Add an End-to-End Testing Solution? » No## 是否添加ESLint语法检查√ Add ESLint for code quality? Yes## 是否添加Prettiert代码格式化√ Add Prettier for code formatting? No 自己动手编写一个App组件 1234567891011121314151617181920<template> <div class="app"> <h1>你好啊！</h1> </div></template><script lang="ts"> export default { name:'App' //组件名 }</script><style> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius:...

HTML&&CSS基础知识要点

发表于2025-03-01|基础知识

HTML&&CSS基础知识要点HTML&&CSS基础知识要点Margin 塌陷问题如何解决?BFC 是什么? 怎么触发?12345678910111213141516171819202122<!DOCTYPE html><html><head><style type="text/css">.box { width: 100px; height: 100px; background-color: red;}#box1 { margin-bottom: 200px;}#box2 { margin-top: 100px;}</style></head><body> <div id="box1" class="box"></div> <div id="box2" class="box"></div></body></html> **margin塌陷问题：**上面例子两个 div 的间隔为200px，取 margin 重叠部分的更大值（这是正常情况，符合 CSS 的外边距合并规则），如果希望间隔 300px，可为每个 div 触发 BFC。**BFC定义：**全称叫块级格式化上下文（Block Formatting Context），一个独立的渲染区域，有自己的渲染规则，与外部元素不会互相影响。BFC触发方式：设置了 float 属性（值不为 none）设置了 position 属性为 absolute 或 fixed 设置了 display 属性为 inline-block 设置了 overflow 属性（值不为 visible）如何隐藏一个元素display: noneopacity:0visibility: hiddenclip-path: circle(0)position:absolute;top:-999px; overflow 不同值的区别三栏布局是一种常见的网页布局方式，通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏以及一个自适应宽度的主要内容区域。 Flex 布局、Grid 布局、浮动布局、绝对定位布局 calc()方法calc() 是 CSS 中的一个函数，用于动态计算样式属性的值。calc() 主要用于解决以下问题：**响应式布局：**calc() 可以根据不同的屏幕尺寸和视口大小，动态调整元素的尺寸或间距，以实现响应式布局。这有助于确保页面在不同设备上的显示效果良好。**动态尺寸调整：**calc() 可用于根据其他元素的尺寸或动态内容的大小来计算元素的尺寸。这在构建复杂的布局时非常有用。**优化代码：**calc() 可减少不必要的 CSS 代码和样式属性的硬编码，以实现更灵活、可维护和自适应的布局。 1property: calc(expression); 其中 expression 是一个包含数值、运算符和单位的表达式。您可以在 calc() 中执行各种数学运算，例如加法、减法、乘法和除法。以下是一些示例，展示了 calc() 如何用于解决不同问题： 12345678910111213141516171819202122232425262728293031323334353637383940414243<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 自适应宽度 */ .container { width: calc(100% - 200px); /* 宽度是父元素宽度减去 200 像素 */ background-color: lightblue; height: 100px; } /* 响应式间距 */ .box { margin: calc(1rem + 5%); /* 间距基于字体大小和视口宽度 */ ...

HTML&&CSS性能优化

发表于2025-03-01|性能优化

HTML&&CSS基础知识要点什么是重绘，什么是回流?如何减少回流?重绘(Repaint): 重绘是指当元素样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的过程。例如，修改元素的背景颜色、字体颜色等。回流(Reflow): 回流是指当元素的布局属性发生改变，需要重新计算元素在页面中的布局位置时，浏览器重新进行布局的过程。例如，修改元素的宽度、高度、位置等。回流的成本比重绘高得多，因为它涉及重新计算元素的几何属性和页面布局。而重绘只需要重新绘制已计算好的元素样式。如何减少: **使用 CSS 动画代替 JavaScript 动画:**CSS 动画利用 GPU 加速，在性能方面通常比 JavaScript 动画更高。效。使用 CSS的 transform 和 opacity 属性来创建动画效果，而不是改变元素的布局属性，如宽度高度等。 **使用 translate3d 开启硬件加速:**将元素的位移属性设置为 translate3d(0，0，0)，可以强制使用GPU 加速。这有助于避免回流，并提高动画的流畅度。 **避免频繁操作影响布局的样式属性:**当需要对元素进行多次样式修改时，可以考虑将这些修改合并为一次操作。通过添加/移除 CSS 类来一次性改变多个样式属性，而不是逐个修改。 **使用 requestAnimationFrame:**通过使用 requestAnimationFrame 方法调度动画帧，可以确保动画在浏览器的重绘周期内执行，从而避免不必要的回流。这种方式可确保动画在最佳时间点进行渲染。 **使用文档片段(Document Fragment):**当需要向 DOM 中插入大量新元素时，可以先将这些元素添加到文档片段中，然后再将整个文档片段一次性插入到 DOM 中。这样做可以减少回流次数。(虚拟 dom vue 的方式) **让元素脱离文档流:**position:absolute/position:fixed /float:left，(只是减少回流，不是避免回流。使用 visibility:hidden 替代 display:none: visibility:hidden 不会触发回流，因为元素。仍然占据空间，只是不可见。而使用 display:none 则会将元素从渲染树中移除，引起回流。

JavaScript性能优化

发表于2025-02-28|性能优化

JavaScript性能优化隐藏类12345678910111213console.time('a');for (let i = 0; i < 1000000; ++i) { const obj = {}; obj['a'] = i;}console.timeEnd('a');console.time('b');for (let i = 0; i < 1000000; ++i) { const obj = {}; obj[`${i}`] = i;}console.timeEnd('b'); 1.比较主流的 JS 引擎是 v8，这里假设是跑在 chrome 或 node 上，用的是 v8 引擎V8 是一个 c++ 实现的 js 解析引擎，内部利用隐藏类(Hidden Class)的方式来存放 JS 对象。2.隐藏类的特性是:多个属性顺序一致的 JS 对象，会重用同一个隐藏类，减少 new Class 的开销。3.所以左边生成1个隐藏类，而右边生成3个隐藏类，因此左边代码性能更好指导代码编写习惯:定义对象或类时，尽可能保证属性顺序一致。快速模式/字典模式1234567891011121314console.time('a');const arr1 = [];for (let i = 0; i < 10000000; ++i) { arr1[i] = 1;}console.timeEnd('a');console.time('b');const arr2 = [];arr2[10000000 - 1] = 1;for (let i = 0; i < 10000000; ++i) { arr2[i] = 1;}console.timeEnd('b'); 1.比较主流的 JS 引擎是 v8，这里假设是跑在 chrome 或 node 上，用的是 v8 引擎。 2.V8 是一个 c++ 实现的 js 解析引擎，内部有多种方式存放 JS 数组。 3.”数组从 0 到 length-1 无空洞”，会进入快速模式，存放为 array。 4.”数组中间有空洞”，会进入字典模式，存放为 HashMap。(这是 V8 的一个优化策略，保证用最合适的数据结构处理当下场景，如果遇到数据量过大或者是松散结构的话，就改变为HashMap，牺牲遍历性能，换取访问性能。) 指导代码编写习惯从0开始初始化数组，避免数组进入字典模式。让数组保持紧凑，避免数组进入字典模式。内存泄漏内存泄漏是指应用程序中的内存不再被使用但仍然被占用，导致内存消耗逐渐增加，最终可能导致应用程序性能下降或崩溃。内存泄漏通常是由于开发者编写的代码未正确释放不再需要的对象或数据而导致的。 **特征:**程序对内存失去控制内存泄漏的案例: 意外的全局变量： 12345678function someFunction() { // 这是错误注释示例，应改为正确的注释格式 /*! 这个变量会变成全局变量，并可能导致内存泄漏 */ myObject = { key: 'value' };}someFunction();console.log(myObject); // 可以在全局作用域访问到 myObject，说明它成了全局变量闭包:闭包可能会无意中持有对不再需要的变量或对象的引用，从而阻止它们被垃圾回收。 12345678910111213function createClosure() { const data = new Array(1000000).fill('大量数据'); return function () { console.log(data); };}const closureFunction = createClosure();// 使用闭包函数closureFunction();// 当不再需要闭包函数时，手动解除引用closureFunction = null; 事件监听器:...

JavaScript进阶知识要点

发表于2025-02-28|进阶

JavaScript进阶知识要点JS事件绑定事件与解除事件绑定事件 1234567891011121314// 通过 ID 获取元素const element = document.getElementById("myElement");// 绑定点击事件element.addEventListener("click", function (event) { // 在这里编写处理点击事件的代码 console.log('元素被点击了');});// 绑定键盘按下事件element.addEventListener("keydown", function (event) { // 在这里编写处理键盘按下事件的代码 console.log(`按下了键：${event.key}`);}); 解除事件 123456789101112131415161718// 假设已经获取到了元素const element = document.getElementById('yourElementId'); // 这里要根据实际情况替换ID// 定义点击事件处理函数（与绑定事件时使用的函数需为同一引用）function clickHandlerFunction() { // 处理点击事件的代码}// 定义键盘按下事件处理函数（与绑定事件时使用的函数需为同一引用）function keydownHandlerFunction() { // 处理键盘按下事件的代码}// 解除点击事件的绑定element.removeEventListener("click", clickHandlerFunction);// 解除键盘按下事件的绑定element.removeEventListener("keydown", keydownHandlerFunction); 事件冒泡和事件捕获的区别，如何阻止？事件冒泡(Bubbling): 事件从触发事件的目标元素开始，逐级向上冒泡到 DOM 树的根节点。首先执行目标元素上的事件处理程序，然后是父元素，再是更高层次的祖先元素。事件冒泡是默认的事件传播方式。事件捕获(Capturing): 事件从 DOM 树的根节点开始，逐级向下捕获到触发事件的目标元素首先执行根节点上的事件处理程序，然后是子元素，再是更低层次的子孙元素。事件捕获通常需要显式启用，通过 addEventListener的第三个参数设置为 true 来启用事件捕获。 **应用:**addEventListener第三个参数:true 为捕获，false 为冒泡，默认false。event.stopPropagation()阻止冒泡 1234567891011121314151617181920212223242526272829303132333435363738394041424344<!DOCTYPE html><html><head> <style> .parent { padding: 20px; background-color: lightgray; } .child { padding: 20px; background-color: lightblue; } </style></head><body> <div class="parent"> <div class="child"> <button id="btn">点击我</button> </div> </div> <script> const parent = document.querySelector('.parent'); const child = document.querySelector('.child'); const...

JavaScript基础知识要点

发表于2025-02-28|基础知识

JavaScript基础知识要点判断object为空常用方法: Object.keys(obj).length === 0 JSON.stringify(obj)===’{} for in 判断以上方法都是不太严谨，因为处理不了 const obj ={[Symbol(‘a’)]:1 }. 这种情况更严谨的方法:Reflect.ownKeys(obj).length ===0 强制类型转换、隐式类型转换强制类型转换 123456// 使用 let 声明变量 num 并将字符串 "42" 转换为数字let num = Number("42");// 使用 let 声明变量 str 并将数字 123 转换为字符串let str = String(123);// 使用 let 声明变量 bool 并将数字 0 转换为布尔值let bool = Boolean(0); 隐式类型转换 1234567891011// 将数字 10 和字符串 "Hello" 拼接var result = 10 + "Hello";console.log(result);// 比较 true 和 1，并将结果赋值给变量var isTrueEqualOne = true == 1;console.log(isTrueEqualOne);// 比较 false 和 0，并将结果赋值给变量var isFalseEqualZero = false == 0;console.log(isFalseEqualZero); ==和===的区别“==”，先隐式类型转换，再判断值是否相等“===”，直接判断类型 +值是否相等 1234567891011const a = { i: 1, valueOf: function() { return this.i++; }};// 利用宽松相等的隐式类型转换特性if (a == 1 && a == 2 && a == 3) { console.log('Hello World!');} javascript 的数据类型基本数据类型: a.Number(数字):表示数值，包括整数和浮点数。 b.String(字符串):表示文本数据，使用引号(单引号或双引号)括起来。 c.Boolean(布尔值):表示逻辑值，即true(真)或false(假) d.Nul(空):表示一个空值或没有值的对象。 e.Undefined(未定义):表示一个未被赋值的变量的值。 f.Symbol(符号):表示唯一的标识符。复杂数据类型(也被称为引用类型): a.Object(对象):表示复杂数据结构，可以包含键值对的集合 b.Array(数组):表示有序的集合，可以包含任意类型的数据。c.Function(函数):表示可执行的代码块，在 ECMAScript 2020(ES11)规范中正式被添加 BigInt 数据类型。用于对“大整数”的表示和操作。 a.结尾用n表示:100000n/200n基础类型存放于栈，变量记录原始值;引用类型存放堆，变量记录地址 javascript 变量在内存中的堆栈存储基础类型会存放于栈，引用类型会存放在堆 12345678function modifyObj(obj) { obj.m = 50; console.log(obj.m); // 输出: 50}const originalObj = { m: 30 };modifyObj(originalObj);console.log(originalObj.m); // 输出: 50 1.当执行 consto={ m:30 } 时，相当于在堆内存开辟一块空间，存储{m:30 }，同时利用变量。记录该堆内存地址，o存放于栈。 2.接着执行 fn(o)会把。记录的地址值作为实参传递到方法 fn 中，同时记录在 obj 副本变量中(注意:JS 的传参都是值传递) 3.再下来执行 obj={m:50 }，相当于重新开辟了一个堆内存空间存储{m:50}，同时把地址记录到 obj 中。 4.然后执行...