- 博客(30)
- 收藏
- 关注
RSS订阅原创 Vue received a Component that was made a reactive object. This can lead to unnecessary performance
但是，在某些情况下，将Vue组件对象转换为响应式对象是不必要的，因为组件本身是Vue的核心概念，已经具有响应式的功能，因此，如果你将一个Vue组件对象转换为响应式对象，将会出现重复观察相同的对象属性的情况，导致不必要的性能开销。将一个Vue组件对象转换为响应式对象时，可能会导致不必要的性能开销。为了避免这种情况，Vue建议使用markRaw方法将组件对象标记为非响应式对象，或者使用shallowRef代替ref来创建一个浅响应式对象。终端提示警告warning message。
2024-01-05 16:10:26
2322
原创 Vite启动后提示Network: use `--host` to expose
Vite启动后提示Network: use `--host` to expose
2024-01-02 20:10:16
686
原创 JavaScript 获取字符串的字节长度
JavaScript 编码中 字母和数字占据一个字节，但是有些其他符号占据2,3,4个字节的也有。因此，想要获取字符串的字节长度，就不能单纯的使用String.length。
2023-12-29 15:35:02
456
原创 配色网站推荐
Material Palette：Flat UI Colors： Coolors： Brand Colors： 中国风配色： uiGradients：
2023-12-20 15:16:46
27
原创 localforage Uncaught SyntaxError: Unexpected token ＜
localforage安装在vue项目中引入需要将node_modules/localforage/dist/localforage.js文件复制粘贴到项目根目录下的/public文件夹中，然后在App.vue文件中引入需要将文件拷贝至/public目录，否则会一直报错，
2023-08-23 13:40:41
83
原创 monaco-editor 如何禁用键盘快捷键 Keyboard Shortcuts
monaco-editor 如何禁用键盘快捷键 Keyboard Shortcuts
2023-08-09 14:09:56
370
原创 如何动态生成antd vue的menu组件
需要根据动态生成垂直菜单组件，数据来源的一级菜单可能包含二级子菜单，也可能不包含二级子菜单。难度在于是否包含二级子菜单决定着生成<a-menu-item>组件还是<a-sub-menu>组件，因此给开发带来难度。且vue的模板预览中v-if, v-else等条件判断不能与v-for循环出现在同级标签上。善用template标签，将v-for循环放在template标签，再将v-if, v-else语句判断是否包含子菜单，决定生成<a-menu-item>还是<a-sub-menu>template模板。
2023-05-25 11:11:51
756
原创 前端如何预览pdf文件流
通过查找资料，可以找到如下几种方案，其中最为成熟的方案是vue-pdf1. iframe 既可以用来浏览本地static下的文档，也可以预览后端返回的文件流文档2. vue-pdf 较为完善的vue预览pdf的方案3. vueshowpdf 网络上找到的一个他人封装的pdf组件优点vue-pdf总结下来，简单在页面嵌套PDF样式没有定制化vueshowpdf权限控制，样式定制需求高vue-pdf。
2023-05-23 14:36:24
8216
原创 iconfont 使用总结
当项目足够复杂时，本地管理icons资源的劣势变得愈加明显，首先是占用项目空间，其次以组件形式引入单个svg文件挺麻烦，其次使用iconfont的icon还需要创建一个文件，将svg内容复制粘贴到本地。找到满意的图表，鼠标聚标可以看到图标上出现购物车按钮，点击此按钮可以选择将该图表添加到购物车。添加到购物车成功后，会看到顶部栏的购物车上面出现红色的数字1，点击顶部栏的购物车。添加到项目之后，进入到项目页面，选择font class引入方式，点击下载至本地。通过class使用图标,如：icon-daima；
2023-05-10 14:14:23
442
原创 vue2使用butterfly绘制有向无环图经验总结
节点的位置可以交给canvas.layout方法去计算，只需要定义layout的类型和节点之间的横向间距和行间纵向间距。canvas config 如下。render data的结构。
2023-05-09 14:58:25
1690
原创 Vue标签属性如何动态传参并拼接字符串
我们需要根据传入值的类型，在placeholder属性赋值"请输入长度"，“请输入宽度”，"请输入厚度"等提示字符。v-bind:属性=" ‘字符串’+自定义变量名",需要注意一下属性一定是":属性="这种形式才会起作用。该动态参数通过某个条件计算而来，因此将该参数写到computed()中最为合理，如下代码。html标签input的属性placeholder需要动态传参并拼接固定的字符串。动态改变组件placeholder的值，这样做的缺点是引入一个新的变量。3.1 placeholder动态绑定。
2023-04-27 10:01:23
4729
原创 Vue Click事件同时传入时间对象和自定义参数
- 写入自定义参数 --> < button @click = " click（myparm） " > click </ button > </ div >-- 写入自定义参数 --> < button @click = " click（myparm） " > click </ button > </ div >-- 写入自定义参数 --> < button @click = " click（myparm） " > click </ button > </ div >
2023-04-27 09:59:25
749
原创 关于安装 Windows Build Tools 的一些体会
一切都要从Sharp说起，Sharp是Node.js平台上相当热门的图像处理库，实际上是基于C语言编写的libvips库封装而来,它可以实现图片编辑操作，比如裁剪，格式转换，旋转变换，滤镜添加等。此命令会下载并安装Visual C++ Build Tools 2015，这个工具是用来编译流行的原生模块。因为Sharp是一个原生的Node模块，在windows系统中需要搭建编译环境。2021年3月24日在公司电脑重新安装此环境，只需要5分钟就完成下载安装和环境配置。注意，此过程在我这里用了3个多小时…
2023-04-27 09:54:21
1390
原创 React 框架学习笔记
虚拟DOM什么时候该用？使用虚拟DOM的时候只需要对比差异，然后修改JS对象(生成的虚拟DOM)，最后把生成的DOM结构插入到页面中，减少渲染的次数，提升整个页面的渲染效率。当变更时，虚拟DOM使用DIFF算法进行新旧虚拟DOM的比较，将变更放到变更队列中，最终只把变化的部分重新渲染，从而提高渲染效率。在我们的课程中，在update()，也就是在更新元素的阶段，会先生成一个改变之后的DOM结构，然后对DOM树的type，props，chirdren等地方进行了对比，从而实现对整个DOM树的局部更新。
2023-04-27 09:53:31
156
原创 提交表单触发页面自动刷新的问题
为了向js脚本实现一个测试页面，随手写了一个带提交按钮的表单，遇到了点击提交按钮时，每次都会触发页面刷新，以至于我还没有在显示结果的页面元素（函数代码写在延迟执行函数setTimeout里）看到我的测试结果，页面就被重新加载了。我的页面包含一个带legend标题，包含两个input输入框，和一个submit确认按钮的form表单，以及一个显示测试结果的div块状元素。form对象的onsubmit事件类似onclick,都是先处理调用的函数，再进行表单是否跳转布尔值的判断。
2023-04-27 09:51:02
550
原创 关于使用 NVS 的一些体会
的怀抱，nvs是node version switcher的简写，它的代码受自其他版本控制工具的启发，尤其是nvm的影响，并在此基础上实现了跨平台的优势。最近新开始了一个人项目，代码编译要求更低版本的node，卸载当前的node重装，再重头设置环境变量显然不是灵活的解决方案，我就投入了。在我的环境中，$LOCALAPPDATA=C:/Users/Xiayidan/AppData/Local。因为我是windows的系统，所以我只来谈谈在此环境下的安装和使用心得。下载完成之后，单击.msi文件即可完成安装。
2023-04-27 09:49:19
464
2
原创 场景中的3D模型加载
在于大神交流之后，学到一种此类问题的解决方案，就是将加载的模型先绕着x轴旋转一定的圆弧角度，将其摆正，然后再将摆正的模型放进一个盒子Group里，再将盒子沿着z轴旋转一定的角度，为其position属性赋值，即可将其放置在3D场景中想要的位置上去。最近在工作项目中遇到在3D场景scene中加载模型的问题，遇到了模型坐标系和场景当中的世界坐标系不一致的问题。
2023-04-27 09:46:54
84
原创 Vue遇到“Cannot read property ‘__ob__‘ of undefined“ 的解决办法
如果data里面没有return 哪怕data(){}里面什么数据都没有，也会发生这个错误。报错是因为我在点击切换页面的时候，页面路由没有问题，但是页面切换不过去。脚手架的data方法要这么写，因为实例化Vue的过程中data函数b。新编写一个Vue组件，编译报错，页面无法显示。
2023-04-26 17:08:43
266
原创 GLTFLoader提高模型加载效率
2. .mtl文件里面有指定节点3D Node和材质Material之间的对应关系，纹理图片的路径和名称得是正确的。1. .obj文件里有一行是对.mtl文件的索引，要保证路径和文件名称都是正确的。通过命令行进行格式转换。
2023-04-26 16:55:22
665
原创 vxe-table 渲染性能提升
做到了以上两点之后，基本上数据表渲染的时间从1000毫秒减少到100毫秒不到，有了90%的提升，目前表格渲染的速度基本上取决于接口响应数据的时间。其次是针对复杂的单元格渲染，意味着包含v-if,v-show等的逻辑判断，事件绑定等情况时，应避免直接使用模板渲染，而建议使用渲染器插件。业务上遇到渲染vxe-table大量数据行时，渲染卡顿的问题，分别从两个角度出发，大大的提升了渲染的速度。首先是针对大量数据渲染，不要用data属性去做双向绑定，因为当数据量大时，监听数据的变化是很消耗性能的。
2023-04-25 14:49:58
4263
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人