- 博客(71)
- 收藏
- 关注
RSS订阅原创 vue3 模板编译过程
上述步骤归结起来，简化了 Vue 元素的更新流程，只有当数据发生变化时，渲染函数才会重新执行，生成新的虚拟 DOM，通过有效的 Diff 算法，计算出需要更新哪些具体的 DOM 元素，并执行更新。这种基于虚拟 DOM 的渲染方式既保持了声明式编程的便利性，又提供了相较于直接操作 DOM 更优的性能。文件）或模板字符串中写的声明式模板转换成 JavaScript 渲染函数。这个过程发生在构建时（当使用 Vue CLI 或其他打包工具时）或者在运行时（当使用全量构建时）。
2024-04-05 00:02:07
409
原创 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
1423
原创 vue 样式隔离原理
编译时，会生成data-v-xxxx（hash值），在对应的元素上会增加data-v-xxxx（hash值）的属性，这个属性在不同的单文件组件之间是唯一的存在，对应的样式也会添加。hash值在不同环境生成的方式有所不同。，进而实现样式隔离效果。
2024-01-26 13:55:26
515
原创 JavaScript继承与原型链
原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。当你试图访问一个对象的属性时，如果在该对象本身中找不到该属性，就会在其原型中搜索该属性，如果仍然找不到，那么就会搜索原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾（即原型为null的对象）。1.1 在继承中，子类继承父类的特征和行为，使得子类对象具有父类的实例域和方法。继承和原型链是什么？
2024-01-25 16:50:25
1305
原创 vue3.0规范学习记录
defineProps 和 defineEmits 都是只能在 中使用的编译器宏。在组件使用v-model实现“双向绑定”时，子组件默认通过emits(‘update:modelValue’, params)触发更新；对于结合单文件组件使用的组合式 API，推荐通过 以获得更加简洁及符合人体工程学的语法。通过PascalCase（大驼峰）格式引入组件，模板也使用PascalCase（大驼峰）；
2024-01-23 12:07:55
545
原创 vue for循环不建议使用index作为key的原因
如果将key由绑定index改为绑定id，上述性能开销的问题就不会存在，因为更换key绑定时，删除第二个数据，person3和person4的id并未发生改变，dom也不会发生更新；当点击按钮时，会删除数组第二个数据，这样就会导致原数组第二个数据之后数据的index发生改变，从而导致person3，和person4节点的更新，增加了额外的性能开销；
2024-01-10 18:26:35
723
原创 sessionStorage、cookies、localStorage的区别
sessionStorage、cookies、localStorage都是在Web开发中常用的三种存储数据的方式。它们在存储机制、作用域、容量限制等方面有所不同。
2024-01-03 18:20:42
377
原创 箭头函数的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
439
原创 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
607
原创 微信小程序登录步骤
调用 wx.login() 获取临时登录凭证（code），并回传到开发者服务器。开发者服务器调用 auth.code2Session 接口，使用 code 换取用户唯一标识 OpenID 和会话密钥 session_key。开发者服务器关联 OpenID 和 session_key，返回自定义登录状态。前端将自定义登录状态缓存到 storage，并在请求数据时携带此自定义登录状态。开发者服务器通过自定义登录状态查询 OpenID 和 session_key，验证通过后返回业务数据。
2023-12-17 15:16:16
428
原创 vue路由传参(query和params两种方式)
1.2、query传递对象或者对象组成的数组时，需要注意数据解析错误的问题。1.1、可以使用path或者name方式进行传参。
2023-12-15 15:48:47
1003
1原创 webstorm/idea配置leetcode刷题
安装插件（截图显示我已经安装过了），安装完成后点击OK操作，在编辑器四个边角就出出现一个leetcode的插件。File -> settings -> Plugins -> 搜索leetcode。点击插件图标打开Leetcode，琢磨一下几个按钮，就可以开始掉头发了。
2023-11-15 15:34:17
269
原创 vue按需加载组件
大多数情况下，vue页面可能是如下的写法：访问该页面/组件时，就立刻加载business.vue。也可以使用这种按需加载方式来优化性能：Business激活时才会进行加载。
2023-10-30 18:28:28
166
原创 利用html2canvas + jspdf将页面内容生成pdf并且下载
【代码】利用html2canvas + jspdf将页面内容生成pdf并且下载。
2023-10-07 11:21:31
774
原创 echarts制作关系图谱
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script&
2023-09-20 15:09:07
359
转载 内存泄漏记录
包括使用事件监听addEventListener监听的时候，在不监听的情况下使用removeEventListener取消对事件监听。3、没有清理对DOM元素的引用同样造成内存泄露。2、闭包，维持函数内局部变量，使其得不到释放。前端通过设置变量为null来触发GC。1、不小心往window添加属性。
2023-03-14 19:00:36
64
原创 浏览器兼容性记录
问题说明：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。解决方案：使用 float 属性为 img 布局备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。问题说明：随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。1、es6在IE下无法正常使用，如let、const、promise async/await等。padding:0;
2023-03-14 18:50:43
77
原创 常用JavaScript技巧
1、函数绑定this方法apply(this, [1, 2])参数1：传入的this参数2：需要传入的参数（数组形式）call(this, 1, 2)参数1：需要传入的this参数2：需要传入的参数2、apply应用：获取数组的最大值Math.max.apply(null, [3, 5, 4]) // 5重写默认方法var count = 0;var oldParseInt = parseInt; // 保存原函数window.parseInt = fu
2022-03-14 23:23:57
772
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人