- 博客(437)
- 收藏
- 关注
RSS订阅
原创 vue2调试源码
数据劫持 + 发布者-订阅者模式，递归Observer data数据，其实用Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调，Compile编译模板时，新增Watcher依赖，并触发相关属性的getter方法收集依赖，当我们让属性发生变化时，会notify发布消息给订阅者，触发依赖数据更新。很多时候会用到别名，想快速找到该文件可以复制路径和上面的方法一样 也可以找到。输入文件名字 就可以找到该文件。.........
2023-11-23 13:33:30
780
原创 vue3源码分析
项目链接vue-pure-admin项目源码GitHub地址项目源码码云地址项目学习地址vue-pure-admin (opens new window)是一个免费开源的中后台模版。使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。安装的vscode插件定义组件import { h, defineComponent } from "vue";var IconifyIconOffline =
2023-11-23 13:33:19
2223
原创 webpack代码分割
Chunks：默认值是async另一个值是initial，表示对通过的代码进行处理all表示对同步和异步代码都进行处理minSize：拆分包的大小, 至少为minSize；如果一个包拆分出来达不到minSize,那么这个包就不会拆分；maxSize：将大于maxSize的包，拆分为不小于minSize的包；minChunks：至少被引入的次数，默认是1；如果我们写一个2，但是引入了一次，那么不会被单独拆分；name：设置拆包的名称。..................
2022-08-16 19:10:45
997
原创 vue3实战
vite基于浏览器原生ES imports的开发服务器，利用浏览器去解析imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随其随用同时不仅有vue文件支持，还搞定了热更新，而且热更新的速度不会随着模块增加而变慢使用vite创建vue项目 create-vite-app包npm init @vitejs/app <project-name>//可以选择创建vue项目 也可以创建react项目cd <project-name>npm install
2022-01-07 11:40:42
1837
原创 typescript学习
先装上typescript包，新增脚本"scripts": { "dev":"tsc index.ts --watch" }npm run dev 执行命令，将index.ts文件 翻译为index.js文件比较基础的声明方式let name:string = "bob"let age:number = 10let married:boolean = truelet arr1:number[] = [1, 2, 3]let arr2:Array<number> =
2021-12-28 15:28:22
442
原创 vue绑定key
绑定 key 的作用在于告诉 Vue，如何对待每个 DOM 元素。它帮助 Vue 识别节点的身份，从而在数据发生变化时，更高效地更新 DOM。没有为列表中的元素绑定 key 值时，Vue 可能会出现混乱的 DOM 更新，或者出现意外的行为。指令进行列表渲染时，Vue 会尽可能高效地更新DOM。当数据发生变化时，Vue 会尝试尽量复用已有的 DOM 元素，而不是直接销毁和重新创建。为了让 Vue 能够正确地识别每个 DOM 元素，需要为每个元素提供一个唯一的 key 值。在 Vue 中，使用。
2024-03-19 09:16:55
362
原创 前端打包工具
Webpack 是当前前端开发中最流行的项目打包工具之一，但除了 Webpack，还有其他一些项目打包工具，例如：Parcel：Parcel 是一个快速、零配置的项目打包工具，支持多种类型的资源打包，包括 JavaScript、CSS、HTML、图片等。Rollup：Rollup 是一个用于 JavaScript 库和模块的项目打包工具，它的主要特点是对 ES6 模块进行优化打包，生成更小、更高效的输出。
2024-03-14 09:49:14
731
原创 js静态分析，babel编译，vue的template编译
这三个概念——JavaScript 静态分析、Babel 编译和 Vue 的模板编译——在某种程度上都与代码转换相关，但它们具有不同的作用和实现原理。尽管如此，它们之间确实存在一些共同的地方：预处理：所有这些技术在将代码或模板用于执行之前，都需要对其进行预处理。预处理过程会将原始代码或模板转换为可被浏览器或运行时环境理解和执行的形式。AST（抽象语法树）：这三个技术都使用了抽象语法树（AST）作为中间表示。
2024-03-12 11:32:33
524
原创 for-in，for-of
for…in 和 for…总的来说，for…in 适用于遍历对象的属性，包括可枚举属性和原型链上的属性，而 for…of 适用于遍历可迭代对象的元素值。根据具体的需求选择合适的遍历方式。当使用 for…of 遍历 Set 和 Map 时，可以通过调用其迭代器（iterator）方法来获取迭代器对象，然后使用迭代器对象的next()方法进行遍历。以下是使用 for…of 遍历 Set 和 Map 的示例代码：注意，在遍历 Map 时，使用了数组解构语法来同时取出键和值。
2024-03-07 16:13:08
395
原创 js静态分析
ESLint之所以能够进行静态分析并检测出哪些代码没有被使用，是因为它对 JavaScript 代码进行了语法解析和语义分析。通过静态分析工具，ESLint可以深入理解代码的结构和含义，从而发现潜在的问题，包括未使用的变量、未使用的函数等。具体来说，ESLintESLint首先通过解析器（Parser）将JavaScript代码转换为抽象语法树（）的形式，这样就可以以计算机可以理解的方式来表示代码的结构。: 在获得抽象语法树之后，ESLint会对代码进行语义分析，根据JavaScript。
2024-03-04 15:23:47
490
原创 webpack打包效率优化，webpack打包体积优化
hash通过以上优化措施，可以有效提升 webpack 的打包效率，减少开发和构建时间，提升开发效率和用户体验。根据具体项目需求和场景，选择适合的优化方法进行配置和调整。
2024-03-01 17:18:49
689
原创 es7，es8，es9，es10
truefalse**以上是 ES7（ES2016）引入的两个常用的新增方法。这些方法的引入丰富了 JavaScript 的功能性，使开发者能够更便捷地处理数组元素查找和数值计算等任务。
2024-03-01 16:29:04
303
原创 webpack-cli
是 Webpack 提供的命令行工具，用于在命令行中执行 Webpack 相关的操作。主要完成以下几项工作：负责解析用户在命令行中输入的参数，包括配置文件路径、打包模式、插件等信息。通过解析这些参数，确定如何执行 Webpack 相关的操作。负责读取并解析指定的 Webpack 配置文件（通常是通过读取配置文件，知道如何进行模块打包、资源处理等操作。调用 Webpack API：通过调用 Webpack 提供的 API，将用户输入的参数和配置转化为具体的 Webpack 打包操作。
2024-03-01 15:27:00
536
原创 webpack打包一个文件，做了哪些事情
当使用 Webpack 打包一个文件时，Webpack 内部会进行一系列操作，其中加载 loader 和执行 plugins 是重要的步骤。下面是一个详细的代码示例，展示 Webpack 在加载 loader 和执行 plugins 这两个阶段的具体操作：：入口文件：一个需要通过 loader 转换的模块Webpack 配置文件output: {},module: {rules: [},],},plugins: [});},],加载。
2024-03-01 11:20:55
1074
原创 微信小程序
微信本身提供的数据分析能力，微信本身提供了常规分析和自定义分析两种数据分析方式，在小程序后台配置即可。借助小程序数据助手这款小程序可以很方便的查看。
2024-02-26 13:37:08
865
原创 delete和Vue.delete删除数组的区别？
是 Vue.js 框架提供的方法，删除 Vue 响应式数组元素时会触发响应式更新，确保数组的长度和索引位置的连续性。通常情况下，当需要删除 Vue 响应式数组中的元素时，应该优先使用。删除数组中的元素，可能会导致数组的空洞和索引位置不连续，不够直观，也可能会影响到一些数组操作和迭代时的结果。删除数组中的元素会使数组长度减少，并且确保索引位置连续，删除后的数组会触发响应式更新。是 JavaScript 的内置操作符，删除数组元素时会产生空洞，索引位置不连续；都可以用来删除数组中的元素，但它们之间有一些区别。
2024-02-23 15:32:34
521
原创 $attrs和$listeners的使用场景
是比较少用的边界知识，而且。已经移除，还是有细节可说的。一个包含组件透传属性的对象。结构完全相同，这说明。
2024-02-23 15:24:23
202
原创 v-html有什么问题
可能存在安全风险，特别是当插入的 HTML 内容来自用户输入或未经可靠验证的来源时。会导致模板的可读性下降，因为模板中的逻辑和结构被部分放在了字符串中，难以直观地理解和维护。会动态生成 HTML 内容，浏览器需要对该内容进行解析和渲染，这可能会导致性能问题。相比于直接使用 Vue 的模板语法和组件来渲染内容，使用。提供了方便的功能，但在使用时需要注意安全性和潜在的性能问题。，并避免将不受信任的内容直接渲染到模板中，以确保代码的安全和可维护性。提供了将动态 HTML 插入到模板的便利性，但过度使用。
2024-02-23 15:22:15
698
原创 实现一个Modal
现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。
2024-02-23 15:20:06
895
原创 Vue 3.0中Tree shaking特性
Tree shaking 是指在打包过程中通过静态分析，去除未使用的代码（未被引用的模块或函数），从而减小最终打包生成的文件体积。在 Vue 3.0 中，引入了更好的 Tree shaking 特性，使得在使用 Vue 3 的项目中能够更加高效地进行代码精简和优化。如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去。组件包含了多种主题和功能，但最终只有被使用到的代码被保留，从而减小了打包文件的体积，提高了性能。
2024-02-23 15:15:54
893
原创 Vite 为什么启动非常快
Vite 利用了 ES Modules 的特性，通过原生的 JavaScript 模块机制进行开发，不需要打包整个应用，而是以原生 ES Module 的形式直接加载模块。：Vite 在开发模式下利用了浏览器原生的 ES Module 支持，可以直接在浏览器中运行未经打包的代码，利用浏览器自身的模块解析能力，避免了打包过程，减少了开发环境中的构建时间，因此启动更快。：Vite 会在开发过程中缓存已经编译过的模块，当模块发生改动时，只重新编译改动的模块，而不是重新编译整个项目。
2024-02-23 15:12:40
492
原创 v-model参数的用法
时，它会根据元素的类型自动选择正确的属性并监听输入事件。的参数可以用于指定绑定的属性、传递给组件的属性，以及改变。指令用于在表单元素和组件中创建双向数据绑定。指令传递一个参数，以改变绑定的属性或传递其他参数。在处理表单元素和自定义组件时更加方便和强大。当输入框的值发生变化时，在自定义组件中，我们可以传递额外的参数给。属性，实现了自定义组件的双向绑定。，它表示将输入框的值双向绑定到。事件中更新数据，而非默认的。你还可以使用修饰符来改变。属性上，而不是默认的。是一个修饰符，它告诉。在 Vue.js 中，
2024-02-23 15:03:58
250
原创 vue3升级了什么
需要注意的是，由于引入了一些新的特性和改进，Vue 3 在某些方面可能不再向后兼容 Vue 2，因此在升级到 Vue 3 时需要对现有代码进行一定程度的调整和迁移。不过，Vue 3 的新特性和性能优势使得它成为了一个更加现代化和强大的前端框架。：Vue 3 的包更具有优化的结构，使得它能够更好地支持树摇动 (tree-shaking)，减少最终打包的体积。Vue 3 在许多方面都进行了功能性升级和改进。：Vue DevTools 已更新以支持 Vue 3，并配合 Vue 3 的新特性做出了相应的改进。
2024-02-23 14:40:33
477
原创 Composition API 和 Options API
这样可以提高代码的可读性和可维护性，同时更好地重用和组合代码。更清晰的代码关系：Options API中，各个选项（data、methods、computed等）之间的关系不够明确，可能需要在代码中查找才能看出它们之间的联系。而Composition API采用函数式的方式组织代码，代码的关系更加直观和清晰，便于开发者理解和查找。需要注意的是，虽然Composition API相对于Options API具有一些优势，但Options API在小型项目或对于初学者来说仍然可以是一个简洁和易于理解的选择。
2024-02-23 14:33:52
558
原创 Vue的生命周期
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为。生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在。它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。你可以通过在生命周期钩子前面加上 “中，但需要注意的是服务端渲染时不支持。” 来访问组件的生命周期钩子。还没有创建好，所以在。
2024-02-23 14:14:39
632
原创 多个标签页通信
通过这些代码示例，你可以使用LocalStorage、Broadcast Channel API和WebSocket来在浏览器内的多个标签页之间进行通信。请根据具体需求选择适合的方式来实现标签页之间的通信。
2024-02-22 11:22:59
229
原创 原生的自定义事件
创建自定义事件使用Event使用（可以传参数）detail: {// 将需要传递的参数放到这里// 可以在监听的回调函数中获取到：event.detail})使用document.createEvent('CustomEvent')和initCustomEvent()// 注意这里是为'CustomEvent'// 1. event_name: 事件名称// 2. canBubble: 是否冒泡// 3. cancelable: 是否可以取消默认行为：创建一个事件。
2024-02-22 11:07:37
614
原创 script标签中defer和async的区别
而如果脚本之间没有依赖关系，可以并行加载和执行，并且在加载完成后立即执行，则可以使用。蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的;绿色线代表 HTML 解析。综上所述，如果需要按照特定顺序加载和执行脚本并确保在文档解析完毕后执行，可以使用。标签中控制脚本加载和执行的属性。
2024-02-21 09:36:16
579
原创 函数柯里化
柯理化的核心思想是将一个多参数函数转化为一个返回函数的高阶函数。这个返回函数接收一个参数，并返回一个新的函数来处理剩余的参数。使用柯里化函数，我们可以根据需要逐个传递参数，也可以一次性传递多个参数，都可以正常计算结果。）是一种函数转换的技术，它可以将一个带有多个参数的函数转化为一系列只接受单个参数的函数。函数柯里化在函数式编程中广泛应用，它能够简化函数的使用方式，并提供更高阶的函数操作能力，使得代码更加易读、可维护。命名的，它是一种将多个参数的函数转换为接收单个参数的函数序列的技术。
2024-02-21 09:15:34
106
原创 js函数的长度
属性对于柯里化函数非常有用，可以用来判断柯里化后的函数是否已经接收到了足够的参数。属性返回函数定义时声明的参数个数。在 JavaScript 中，函数的。
2024-02-21 09:09:19
102
原创 HTTP多路复用
HTTP多路复用（HTTP Multiplexing）是HTTP/2协议中的一项关键技术，它允许在同一TCP连接上同时发送多个HTTP请求和接收多个HTTP响应。综上所述，HTTP多路复用是HTTP/2的重要特性，通过在同一TCP连接上并行处理多个请求和响应，解决了HTTP/1.1中的队头阻塞问题，提高了性能和效率。避免了队头阻塞：在传统的HTTP/1.1中，如果一个请求被阻塞或延迟，后续的请求也会被阻塞，导致队头阻塞。当客户端接收到数据帧后，会根据帧的标识对它们进行重组，还原成完整的HTTP请求和响应。
2024-02-21 08:53:47
703
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人