- 博客(82)
- 收藏
- 关注
RSS订阅原创 Vue 3 Diff 算法受 `v-for` 循环中的 `key` 属性影响
是一种标识，它用于唯一标记每个虚拟 DOM 节点。Diff 算法会根据。的选择直接关系到 Diff 算法的效率和最终的 DOM 更新结果。// 之前选中第三个，点击删除后，会出现错乱情况。// 给key加上一个唯一的id即可解决问题。判断新旧节点是否是同一个节点。
2025-01-10 18:20:49
1046
原创 Vue 3 Diff 算法过程及基本实现方式
主要用于在虚拟 DOM 树发生变化时，计算最小的操作以更新真实 DOM。相比 Vue 2，Vue 3 的 Diff 算法做了很多优化。，与 Vue 2 的简单逐个比较方式不同，其性能更高。Vue 3 的 Diff 算法采用了一种。Vue 3 使用的是一种高效的。
2025-01-10 17:57:29
556
原创 iframe与父级页面通信方式
如果父页面和iframe是通过框架（如 React、Vue）开发的，可以使用自定义事件机制。' } });iframe});
2025-01-10 11:50:28
753
原创 vue3运行时执行过程步骤
在 Vue 3 中，运行时的执行过程是一个复杂但高效的机制，主要包括初始化应用、渲染、响应式更新和销毁等阶段。Vue 3 的运行时架构利用虚拟 DOM 和响应式系统实现了高效的渲染与更新，同时通过组合式 API 提供了灵活的开发体验。将其转换为真实 DOM，并插入到页面中。方法，创建一个 Vue 应用实例。Vue 使用虚拟 DOM 树，通过。函数或编译好的模板函数，生成。Vue 3 的响应式系统基于。Vue 使用组件定义的。
2025-01-08 23:38:45
1043
原创 微信小程序几种数据通信方式记录
方式场景特点Properties父传子数据简单直接，单向数据流事件机制（triggerEvent）子传父数据通过事件触发，适合单层级通信父组件中转兄弟组件通信父组件作为中转站，数据共享灵活全局状态管理跨页面、跨组件数据共享适合复杂场景，但引入工具增加复杂度Behavior共享逻辑、共享数据组件间逻辑复用，减少代码冗余插件不同小程序间的共享适合大规模复用场景。
2024-12-31 22:45:34
1414
原创 axios拦截器底层实现原理
注册拦截器开发者通过和向 Axios 的拦截器队列中添加拦截函数。发起请求调用时，Axios 会根据请求拦截器、实际请求函数和响应拦截器构建一个 Promise 链。执行链条请求拦截器：按注册顺序执行。实际的请求函数：发送 HTTP 请求。响应拦截器：按注册顺序逆序执行。返回结果Promise 链最终返回请求的结果或抛出错误，供调用者处理。
2024-12-31 22:06:37
789
原创 vue项目利用webpack进行优化案例
如果项目中使用了 UI 库（如 Element Plus、Ant Design Vue），按需引入可以显著减小打包体积。使用 Webpack 优化 Vue 项目是提升性能和减少打包体积的关键步骤。通过以上优化方法，Vue 项目的性能和打包体积可以显著提升。Vue 提供了路由懒加载功能，可以将组件拆分成独立的块，按需加载，从而减少初始包的体积。如果项目是通过 Vue CLI 创建的，可以直接使用内置配置进行优化。每个项目的需求和场景可能不同，建议结合实际情况调整优化策略。的缓存功能，加速二次构建。
2024-12-30 22:12:02
721
1原创 vue3 模板编译过程
上述步骤归结起来，简化了 Vue 元素的更新流程，只有当数据发生变化时，渲染函数才会重新执行，生成新的虚拟 DOM，通过有效的 Diff 算法，计算出需要更新哪些具体的 DOM 元素，并执行更新。这种基于虚拟 DOM 的渲染方式既保持了声明式编程的便利性，又提供了相较于直接操作 DOM 更优的性能。文件）或模板字符串中写的声明式模板转换成 JavaScript 渲染函数。这个过程发生在构建时（当使用 Vue CLI 或其他打包工具时）或者在运行时（当使用全量构建时）。
2024-04-05 00:02:07
531
原创 vue3+vite配置环境变量
首先在vue3项目根目录创建.env.development 和 .env.prodution两个文件，分别为开发和生产环境（必须.env.开头，需要额外环境，配置自定义的文件名称即可）3.2 在.vue页面或者入口文件main.ts访问环境变量，使用import.meta.env。4.2 打包项目，执行npm run build，生成了dist文件夹；启动本地环境，访问对应页面时，会打印以下信息，包含自定义的环境变量。4.1 安装http-server。，注意变量必须要VITE_开头。
2024-03-24 19:07:38
1782
原创 vue 样式隔离原理
编译时，会生成data-v-xxxx（hash值），在对应的元素上会增加data-v-xxxx（hash值）的属性，这个属性在不同的单文件组件之间是唯一的存在，对应的样式也会添加。hash值在不同环境生成的方式有所不同。，进而实现样式隔离效果。
2024-01-26 13:55:26
608
原创 JavaScript继承与原型链
原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。当你试图访问一个对象的属性时，如果在该对象本身中找不到该属性，就会在其原型中搜索该属性，如果仍然找不到，那么就会搜索原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾（即原型为null的对象）。1.1 在继承中，子类继承父类的特征和行为，使得子类对象具有父类的实例域和方法。继承和原型链是什么？
2024-01-25 16:50:25
1384
原创 vue3.0规范学习记录
defineProps 和 defineEmits 都是只能在 中使用的编译器宏。在组件使用v-model实现“双向绑定”时，子组件默认通过emits(‘update:modelValue’, params)触发更新；对于结合单文件组件使用的组合式 API，推荐通过 以获得更加简洁及符合人体工程学的语法。通过PascalCase（大驼峰）格式引入组件，模板也使用PascalCase（大驼峰）；
2024-01-23 12:07:55
597
原创 vue for循环不建议使用index作为key的原因
如果将key由绑定index改为绑定id，上述性能开销的问题就不会存在，因为更换key绑定时，删除第二个数据，person3和person4的id并未发生改变，dom也不会发生更新；当点击按钮时，会删除数组第二个数据，这样就会导致原数组第二个数据之后数据的index发生改变，从而导致person3，和person4节点的更新，增加了额外的性能开销；
2024-01-10 18:26:35
832
原创 sessionStorage、cookies、localStorage的区别
sessionStorage、cookies、localStorage都是在Web开发中常用的三种存储数据的方式。它们在存储机制、作用域、容量限制等方面有所不同。
2024-01-03 18:20:42
421
原创 箭头函数的this指向问题
箭头函数内部的this是继承自定义时所在对象，而不是执行时所在的对象。这意味着箭头函数没有自己的this，而是使用外层代码块的this。因此，箭头函数不能用作方法或构造函数，也不能访问arguments和super。例如，下面的代码中，obj的show方法是一个箭头函数，它的this是继承自全局对象window，而不是obj本身。所以，this.x的值是undefined，而不是100。如果想让箭头函数的this指向obj，可以使用普通的函数表达式，或者使用bind方法显式绑定this。
2023-12-29 17:11:27
552
原创 uni-app学习记录
接下来我们介绍onLoad、onReady、onShow的先后关系，页面加载的详细流程。uni-app框架，首先根据pages.json的配置，创建页面所以原生导航栏是最快显示的。页面背景色也应该在这里配置。根据页面template里的组件，创建dom。这里的dom创建仅包含第一批处理的静态dom。对于通过js/uts更新data然后通过v-for再创建的列表数据，不在第一批处理。要注意一个页面静态dom元素过多，会影响页面加载速度。
2023-12-20 17:56:18
688
原创 微信小程序登录步骤
调用 wx.login() 获取临时登录凭证（code），并回传到开发者服务器。开发者服务器调用 auth.code2Session 接口，使用 code 换取用户唯一标识 OpenID 和会话密钥 session_key。开发者服务器关联 OpenID 和 session_key，返回自定义登录状态。前端将自定义登录状态缓存到 storage，并在请求数据时携带此自定义登录状态。开发者服务器通过自定义登录状态查询 OpenID 和 session_key，验证通过后返回业务数据。
2023-12-17 15:16:16
480
原创 vue路由传参(query和params两种方式)
1.2、query传递对象或者对象组成的数组时，需要注意数据解析错误的问题。1.1、可以使用path或者name方式进行传参。
2023-12-15 15:48:47
1462
原创 webstorm/idea配置leetcode刷题
安装插件（截图显示我已经安装过了），安装完成后点击OK操作，在编辑器四个边角就出出现一个leetcode的插件。File -> settings -> Plugins -> 搜索leetcode。点击插件图标打开Leetcode，琢磨一下几个按钮，就可以开始掉头发了。
2023-11-15 15:34:17
438
原创 vue按需加载组件
大多数情况下，vue页面可能是如下的写法：访问该页面/组件时，就立刻加载business.vue。也可以使用这种按需加载方式来优化性能：Business激活时才会进行加载。
2023-10-30 18:28:28
236
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人