- 博客(456)
- 收藏
- 关注
RSS订阅
原创 vue2调试源码
数据劫持 + 发布者-订阅者模式，递归Observer data数据，其实用Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调，Compile编译模板时，新增Watcher依赖，并触发相关属性的getter方法收集依赖，当我们让属性发生变化时，会notify发布消息给订阅者，触发依赖数据更新。很多时候会用到别名，想快速找到该文件可以复制路径和上面的方法一样 也可以找到。输入文件名字 就可以找到该文件。.........
2023-11-23 13:33:30
898
原创 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
2303
原创 webpack代码分割
Chunks：默认值是async另一个值是initial，表示对通过的代码进行处理all表示对同步和异步代码都进行处理minSize：拆分包的大小, 至少为minSize；如果一个包拆分出来达不到minSize,那么这个包就不会拆分；maxSize：将大于maxSize的包，拆分为不小于minSize的包；minChunks：至少被引入的次数，默认是1；如果我们写一个2，但是引入了一次，那么不会被单独拆分；name：设置拆包的名称。..................
2022-08-16 19:10:45
1059
原创 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
1951
原创 ts总结第一篇
先装上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
522
原创 用nodejs，读取某个文件，解析该文件写的命令，然后按照先后顺序执行
【代码】用nodejs，读取某个文件，解析该文件写的命令，然后按照先后顺序执行。
2024-11-28 13:49:07
241
原创 JSON.stringify用法
的作用是将jsonData对象转换为格式化的 JSON 字符串，使用两个空格进行缩进，使结果更易读。这在调试或生成可读性强的配置文件时非常有用。如果你有更多问题或需要进一步的解释，请随时提问！
2024-10-24 18:01:50
694
1原创 ts总结第二篇
typeRoots控制类型声明文件的根目录。types控制要包含在编译中的类型声明包。include和 exclude控制编译过程中的文件和目录范围。这些配置项的结合使你能够精确地控制 TypeScript 编译器的行为，包括如何处理类型声明文件和哪些文件应被编译。
2024-08-23 10:44:30
562
原创 终端命令，打开跨域浏览器
这两个命令都会启动一个新的 Chrome 实例，该实例会有跨域请求的能力。如果你只需要一次性的测试，可以在完成测试后关闭这个实例。：你可以在 Launchpad 中找到终端，或者使用 Spotlight 搜索。：在命令提示符中，输入以下命令以打开 Chrome 浏览器，并允许跨域请求。：在终端中，输入以下命令以打开 Chrome 浏览器，并允许跨域请求。的路径与实际安装路径一致。如果你安装在不同的位置，需要修改路径。
2024-08-23 09:06:02
520
原创 分析vue的watch监听打印新旧值
上，下一次设置新值之前，取出，我们需要把存的值，做一个深拷贝，但是会发现，第一次改变值，打印新旧值，打印的都是新值，后续又可以打印出新值和旧值，目前找不到原因，后续再看。，监听a属性，可以打印出新旧值，如果是监听复杂的对象，如下所示。当我们使用data属性下，一个简单属性如。在源码内，可以看到，把上一次值，给存到。
2024-08-21 14:02:00
507
原创 object.defineProperty用法
);// John// Doe在这个例子中，我们创建了一个属性name，它的值是'John'，并且可以被修改（）、可以被枚举（），并且可以被重新定义或删除（});// []// secret在这个例子中，属性hidden是不可枚举的，因此它不会出现在的结果中，但它仍然可以通过obj.hidden访问。允许你以非常细粒度的方式定义对象的属性及其行为。通过使用属性描述符，你可以控制属性的读写、枚举和配置行为，这对于创建复杂的对象和实现自定义行为非常有用。
2024-08-21 13:26:08
579
原创 vscode查找匹配项
将下一个查找匹配项添加到选择Ctrl+D或Cmd+D): 逐个选择每个查找结果，将其添加到选择中，适合需要逐步选择的场景。选择所有找到的查找匹配项或): 一次性选择所有匹配项，适合需要对所有匹配项进行批量操作的场景。这两个功能可以大大提高在 VSCode 中进行批量编辑和查找的效率。
2024-08-21 13:12:03
1354
原创 package.json的 && 和 &的区别，以及|| 和 | 的区别
用于串联构建过程的两个步骤，确保前一个步骤完成后才进行下一个步骤；这种设置通常用于需要同时运行多个服务或任务的场景。用于并行执行两个命令，使得。
2024-08-09 15:07:01
374
原创 npm ERR! network ‘proxy‘ config is set properly. See: ‘npm help config‘
【代码】npm ERR!
2024-07-24 13:24:43
230
原创 监听用户复制/粘贴的内容
是 JavaScript 中用于获取当前页面中被用户选中的文本内容的方法。这个方法通常在浏览器环境中使用，主要用于获取用户选择的文本部分。
2024-07-16 10:03:12
1241
原创 买轻量云服务器
在这种情况下，重新注册时需要提供真实的个人信息，包括姓名、身份证号码等，同时设置一个强密码来保护账户安全。为了账户的安全性，用户还应该确保自己的账户信息得到妥善保管，以免再次丢失。阿里云盘有一套严格的安全措施来保护用户的数据安全，例如设置强密码、启用两步验证功能、不要轻易分享账户信息和文件链接、定期备份数据等。如果一个用户在阿里云上注销了账户，然后重新以新的电子邮件地址和手机号码注册，该用户将被视为新的用户。总的来说，阿里云注销后重新注册并不能享受新用户的优惠，需要重新注册后以新用户的身份享受相应的服务。
2024-07-10 11:30:34
407
原创 vue绑定key
绑定 key 的作用在于告诉 Vue，如何对待每个 DOM 元素。它帮助 Vue 识别节点的身份，从而在数据发生变化时，更高效地更新 DOM。没有为列表中的元素绑定 key 值时，Vue 可能会出现混乱的 DOM 更新，或者出现意外的行为。指令进行列表渲染时，Vue 会尽可能高效地更新DOM。当数据发生变化时，Vue 会尝试尽量复用已有的 DOM 元素，而不是直接销毁和重新创建。为了让 Vue 能够正确地识别每个 DOM 元素，需要为每个元素提供一个唯一的 key 值。在 Vue 中，使用。
2024-03-19 09:16:55
522
原创 前端打包工具
Webpack 是当前前端开发中最流行的项目打包工具之一，但除了 Webpack，还有其他一些项目打包工具，例如：Parcel：Parcel 是一个快速、零配置的项目打包工具，支持多种类型的资源打包，包括 JavaScript、CSS、HTML、图片等。Rollup：Rollup 是一个用于 JavaScript 库和模块的项目打包工具，它的主要特点是对 ES6 模块进行优化打包，生成更小、更高效的输出。
2024-03-14 09:49:14
867
原创 js静态分析，babel编译，vue的template编译
这三个概念——JavaScript 静态分析、Babel 编译和 Vue 的模板编译——在某种程度上都与代码转换相关，但它们具有不同的作用和实现原理。尽管如此，它们之间确实存在一些共同的地方：预处理：所有这些技术在将代码或模板用于执行之前，都需要对其进行预处理。预处理过程会将原始代码或模板转换为可被浏览器或运行时环境理解和执行的形式。AST（抽象语法树）：这三个技术都使用了抽象语法树（AST）作为中间表示。
2024-03-12 11:32:33
698
原创 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
415
原创 js静态分析
ESLint之所以能够进行静态分析并检测出哪些代码没有被使用，是因为它对 JavaScript 代码进行了语法解析和语义分析。通过静态分析工具，ESLint可以深入理解代码的结构和含义，从而发现潜在的问题，包括未使用的变量、未使用的函数等。具体来说，ESLintESLint首先通过解析器（Parser）将JavaScript代码转换为抽象语法树（）的形式，这样就可以以计算机可以理解的方式来表示代码的结构。: 在获得抽象语法树之后，ESLint会对代码进行语义分析，根据JavaScript。
2024-03-04 15:23:47
722
原创 webpack打包效率优化，webpack打包体积优化
hash通过以上优化措施，可以有效提升 webpack 的打包效率，减少开发和构建时间，提升开发效率和用户体验。根据具体项目需求和场景，选择适合的优化方法进行配置和调整。
2024-03-01 17:18:49
872
原创 es7，es8，es9，es10
truefalse**以上是 ES7（ES2016）引入的两个常用的新增方法。这些方法的引入丰富了 JavaScript 的功能性，使开发者能够更便捷地处理数组元素查找和数值计算等任务。
2024-03-01 16:29:04
342
原创 webpack-cli
是 Webpack 提供的命令行工具，用于在命令行中执行 Webpack 相关的操作。主要完成以下几项工作：负责解析用户在命令行中输入的参数，包括配置文件路径、打包模式、插件等信息。通过解析这些参数，确定如何执行 Webpack 相关的操作。负责读取并解析指定的 Webpack 配置文件（通常是通过读取配置文件，知道如何进行模块打包、资源处理等操作。调用 Webpack API：通过调用 Webpack 提供的 API，将用户输入的参数和配置转化为具体的 Webpack 打包操作。
2024-03-01 15:27:00
1181
原创 webpack打包一个文件，做了哪些事情
当使用 Webpack 打包一个文件时，Webpack 内部会进行一系列操作，其中加载 loader 和执行 plugins 是重要的步骤。下面是一个详细的代码示例，展示 Webpack 在加载 loader 和执行 plugins 这两个阶段的具体操作：：入口文件：一个需要通过 loader 转换的模块Webpack 配置文件output: {},module: {rules: [},],},plugins: [});},],加载。
2024-03-01 11:20:55
1199
原创 微信小程序
微信本身提供的数据分析能力，微信本身提供了常规分析和自定义分析两种数据分析方式，在小程序后台配置即可。借助小程序数据助手这款小程序可以很方便的查看。
2024-02-26 13:37:08
1753
原创 delete和Vue.delete删除数组的区别？
是 Vue.js 框架提供的方法，删除 Vue 响应式数组元素时会触发响应式更新，确保数组的长度和索引位置的连续性。通常情况下，当需要删除 Vue 响应式数组中的元素时，应该优先使用。删除数组中的元素，可能会导致数组的空洞和索引位置不连续，不够直观，也可能会影响到一些数组操作和迭代时的结果。删除数组中的元素会使数组长度减少，并且确保索引位置连续，删除后的数组会触发响应式更新。是 JavaScript 的内置操作符，删除数组元素时会产生空洞，索引位置不连续；都可以用来删除数组中的元素，但它们之间有一些区别。
2024-02-23 15:32:34
736
原创 $attrs和$listeners的使用场景
是比较少用的边界知识，而且。已经移除，还是有细节可说的。一个包含组件透传属性的对象。结构完全相同，这说明。
2024-02-23 15:24:23
248
原创 v-html有什么问题
可能存在安全风险，特别是当插入的 HTML 内容来自用户输入或未经可靠验证的来源时。会导致模板的可读性下降，因为模板中的逻辑和结构被部分放在了字符串中，难以直观地理解和维护。会动态生成 HTML 内容，浏览器需要对该内容进行解析和渲染，这可能会导致性能问题。相比于直接使用 Vue 的模板语法和组件来渲染内容，使用。提供了方便的功能，但在使用时需要注意安全性和潜在的性能问题。，并避免将不受信任的内容直接渲染到模板中，以确保代码的安全和可维护性。提供了将动态 HTML 插入到模板的便利性，但过度使用。
2024-02-23 15:22:15
1268
原创 实现一个Modal
现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。
2024-02-23 15:20:06
1020
原创 Vue 3.0中Tree shaking特性
Tree shaking 是指在打包过程中通过静态分析，去除未使用的代码（未被引用的模块或函数），从而减小最终打包生成的文件体积。在 Vue 3.0 中，引入了更好的 Tree shaking 特性，使得在使用 Vue 3 的项目中能够更加高效地进行代码精简和优化。如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去。组件包含了多种主题和功能，但最终只有被使用到的代码被保留，从而减小了打包文件的体积，提高了性能。
2024-02-23 15:15:54
965
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人