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