基础 React函数组件 函数组件首字母必须大写。 函数组件必须有返回值，若不需要渲染内容则返回null。 使用函数组件可以自闭和也可以成对闭合。 js中bind绑定多个参数即设置前面参数为默认参数，后续调用新的函数的时候，只需要传剩余的参数。 jsx的列表渲染 1234567891011121314151617181920// 来个列表 const songs = [ { id: 1, name: "痴心绝对" }, { id: 2, name: "像我这样的人" }, { id: 3, name: "南山南" }, ]; function App() { return ( <div className="App"> <ul> {songs.map((item) => ( <li>{item.name}</li> ))} </ul> ...

本文主要记录了关于 Vue3 的相关笔记，主要记录 Vue3 及其生态的使用与技巧，不定时更新。 基础创建一个 app 实例并挂载1234567891011import { createApp } from "vue"; // 从一个单文件组件中导入根组件 import App from "./App.vue"; const app = createApp(App); // app.config.errorHandler = (err) => { /* 处理错误 */ }; // 挂在到跟组件 #app 容器里面 app.mount("#app"); 应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。这几个方法的返回值都是应用实例本身，也就是通过 createApp() 方法创建的对象。这样可以方便地链式调用这些方法，而不需要每次都写 app. ...

本文主要记录了关于 Vue2 的相关笔记，主要记录 Vue2 的一些基础概念与知识，帮助理解 Vue3。 Vue 的核心特性数据驱动(MVVM)数据驱动(MVVM)：MVVM表示的是Model-View-ViewModel MVVM 模型由以下三个部分组成： View：表示当前页面所渲染的 DOM 结构，负责将数据模型转化为 UI 展现出来。View 层通常是由 HTML 和 CSS 来编写的，也可以使用模板语言或组件化的方式来构建。 Model：表示当前页面渲染时所依赖的数据源，可以在 Model 层中定义数据修改和操作的业务逻辑。Model 层通常是由 Javascript 对象或数组来表示的，也可以使用 Vuex 等状态管理工具来管理。 ViewModel：表示 Vue 的实例，它是 MVVM 的核心。ViewModel 负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。ViewModel 层通常是由 Vue 的选项和方法来定义的，也可以使用组合式 API 等新特性来增强。 MVVM 模型的工作原理是这样的： 当用户在 ...

本文主要记录了关于前端面试常考与常问的知识笔记，内容较多，不间断更新。 CSS CSS中盒模型有传统的content-box与border-box，二者区别在于前者的width与height设置的是content-box，而后者设置的是border-box，注意背景图之类的属性显示依然相同，默认的background-origin属性就是padding-box，即背景图从padding-box开始显示，注意这个属性不要与background-color混淆，background-color默认全部显示。 CSS优先级 ID选择器的个数。 类选择器，属性选择器，伪类选择器的个数。 标签选择器，伪元素选择器的个数。 使用rem的移动端适配方案 核心思路为： 设置网页元素的width属性为rem单位。 通过js获取客户viewport宽度，并除以初始设置宽度，得到放大比例scale。 修改html元素的font-size，达到等比例适配效果。 1234567891011121314151617181920212223242526272829303132333435363738 ...

本文主要记录了 JS 基础以及 ES6 的相关笔记，随缘更新。 JS 基础基本概念 JS 中 label 标签用来终止或者跳过外层循环 12345678910111213141516171819202122232425top: for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { if (i === 1 && j === 1) break top; console.log("i=" + i + ", j=" + j); } } // i=0, j=0 // i=0, j=1 // i=0, j=2 // i=1, j=0 // 直接进入下一轮外层循环 top: for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { if (i === 1 && j === 1) continue top; console.log(& ...

本文主要介绍了 JS 中的事件循环概念，详细讲解了 Browser 中的事件循环以及 Node.js 中的事件循环。 查看参考资料 参考方向教程原帖面试必问之 JS 事件循环(Event Loop)，看这一篇足够面试必问之 JS 事件循环(Event Loop)Node.js 事件循环Event Loop通俗移动的 Node.js 事件循环node.js 事件循环 前言JS 是一门单线程的语言，执行过程中每一步代码都有严格的先后顺序，但 JS 也能够实现异步编程，JS 本身并不具备异步编程的能力，其异步编程是依赖其宿主实现的，而实现异步编程的核心机制就是事件循环。 浏览器中 JS 异步执行的原理例如发送ajax请求以及设定setTimeout定时器，实现这种异步，主要依赖于浏览器的定时触发线程以及 HTTP 请求线程，即浏览器才是执行发送请求以及定时功能的角色，JS 引擎只负责执行这些事件回调的代码。 浏览器的进程与线程以 Chrome 为例，浏览器不仅有多个线程 ...

本文主要讲解 Promise 的常用方法以及使用技巧，并实现如何手写一个 Promise。 Promise 的出现回调地狱问题在传统的 JS 编程中始终存在一个问题，即当当前回调函数的执行依赖于上一个回调函数的执行结果的时候，会形成回调函数层层嵌套的问题，严重影响代码的可读性与可维护性，这种现象一般称之为回调地狱。 下面为示例代码，回调地狱的一个比较常见的情景为ajax请求，即下一个请求的是否发起依赖于上一个请求的结果。 12345678910111213141516171819202122232425let xhr = new XMLHttpRequest(); xhr.open( "get", "https://v0.yiketianqi.com/api?unescape=1&version=v61&appid=82294778&appsecret=4PKVFula&city=%E5%8C%97%E4%BA%AC" ); xhr.send(); xhr.onreadystatechange = fu ...

本文为个人自用 Git 笔记，记录了 Git 的常用命令，不定时更新(●’◡’●)。 Git 常用命令clone 基本格式为：git clone [url] [directory]，其中[directory]表示需要创建目录的本地名称，省略则默认为版本库的名称。有一些附加参数如下 -l | --local：只有当指定的版本库是一个本地路径才会生效，能跳过正常的传输机制，直接复制.git目录下的部分文件，即使不指定这个选项默认也会采用本地优化，但注意由于硬链接的特性，本地优化的克隆方式存在一些风险。 -s | --shared：当远程版本库在本地机器上时，使用这个选项可以让本地版本库与远程版本库共享对象文件，而不是复制或链接。 --depth <depth>：使用这个选项可以创建一个浅克隆，即只获取最近的<depth>个提交，而不是整个历史记录。这样可以节省时间和空间。 --single-branch：使用这个选项可以只克隆远程版本库的一个分支，而不是所有分支,来节省克隆时间。默认情况下，这个分支是当前活动分支。 123456# 克隆本地机器上的一个项目到 ...

本文介绍了 Vite 的一些常用功能笔记，方便后续记忆与复习。总有种写这个不如直接看文档的感觉QAQ Vite 工作基本原理 传统基于js的bundler based构建工具的慢启动以及热更新缓慢的问题。 原因： 开发服务器需要将所有模块全部打包后才能在浏览器中呈现。 原生js的性能问题。 总结：bundler-based在大型项目下性能低下的原因在于，其开发服务器原理必须先打包才能使用，即便是HMR也是离不开打包这一环节，随着项目体积或者模块体积的增大，打包这一环节会耗费大量的时间。 Vite 的解决方案 将项目的代码分为两类：dependencies与source code： 依赖：即node_modules文件夹下的文件，不常修改的，项目的依赖文件，vite采用使用go编写的esbuild来打包这些文件，提升开发体验。 源码：通常包括ts，tsx，scss等文件，对这些源码的提供是通过原生的ESM来实现的，vite只需要转换并按需提供代码，让浏览器接管了bundler的工作，实现了源码文件的按需加载。 Vite 中 HMR 的更新方式以及浏览器缓存解决方案 基 ...

本文主要介绍正则表达式的基本概念与用法，并对 JS 中的正则表达式的常用方法进行总结，方便后续记忆与复习。 查看参考教程 参考方向教程原帖Learn regex the easy wayLearn regex the easy way菜鸟教程-正则表达式教程Runoob 正则表达式教程JS 中正则表达式MDN-RegExp 正则表达式基本概念元字符 元字符 描述 . 句号匹配任意单个字符除了换行符。 [ ] 字符种类。匹配方括号内的任意字符。 [^ ] 否定的字符种类。匹配除了方括号里的任意字符 * 匹配>=0个重复的在*号之前的字符。 + 匹配>=1个重复的+号前的字符。 ? 标记?之前的字符为可选. {n,m} 匹配num个大括号之前的字符或字符集 (n <= num <= m). (xyz) 字符集，匹配与 xyz 完全相等的字符串. | 或运算符，匹配符号前 ...

本文主要记录笔者 PC 安装 Windows/Ubuntu 双系统的过程、Windows 平台下 VMware 虚拟机安装 Ubuntu 的配置过程、以及双系统 Ubuntu 卸载的注意事项。 本文中 Ubuntu 安装环境：CPU：Intel i7-12700h,GPU：RTX 3060 laptop GPU,OS：Windows 11 Professional。 查看参考教程 参考方向教程原帖Ubuntu 双系统安装基本框架Ubuntu/Windows 双系统安装巨详细——全面解决各种问题（疑难杂症），有手就行EFI 分区如何卸载彻底删除 Ubuntu EFI 分区及启动项 VMware Ubuntu 安装教程在 VMware16 虚拟机安装 Ubuntu 详细教程 制作 Ubuntu 启动盘注意：制作Ubuntu启动盘将格式化 U 盘内的所有内容，U 盘内有文件请及时做好备份。 准备一个容量大于 5GB的 U 盘，此 U 盘将用来制作Ubuntu启动盘。 ...

本篇文章将作为编程语言 JAVA 的学习笔记，供以后查阅与复习使用。 此 JAVA 学习笔记参考自 菜鸟 JAVA 教程 。 本学习笔记以 查询和复习 为主要功能，文章内容应 短小精悍 。 Java 主要特性 查看Java 主要特性 关于 Java 特性的介绍的文字可能比较多 emm。。。主要因为我是照搬的 ，不过只需要简单了解，但需要特别注意的是 Java 与 C++的一个重要区别为 Java 不使用指针而是引用，这对后面理解 Java 程序有很大的帮助。Java 语言是简单的：Java 语言的语法与 C 语言和 C++ 语言很接近，使得大多数程序员很容易学习和使用。另一方面，Java 丢弃了 C++ 中很少使用的、很难理解的、令人迷惑的那些特性，如操作符重载、多继承、自动的强制类型转换。特别地，Java 语言不使用指针，而是引用。并提供了自动分配和回收内存空间，使得程序员不必为内存管理而担忧。Java 语言是面向对象的：Java 语言提供类、接口和继承等面向对象的特性，为了简单起见，只支持类之间的单继承，但支持接口之 ...