![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 51
「已注销」
这个作者很懒,什么都没留下…
展开
-
Vue textarea实现编辑框,并添加行号
【代码】Vue textarea实现编辑框,并添加行号。原创 2023-11-22 17:03:23 · 758 阅读 · 1 评论 -
Vue实现JSON编辑器
点击中括号、花括号、大括号时会高亮显示另一半支持括号、双引号自动补全。原创 2023-11-22 17:05:35 · 2696 阅读 · 1 评论 -
vue3性能优化相关
vue3中是先遍历(v-for),再判断(v-if),这里有个问题就是:如果你有一万条数据,其中只有 100 条是isActive状态的,你只希望显示这 100 条,但是实际在渲染时,每一次渲染,这一万条数据都会被遍历一遍。比如你在这个组件内的其他地方改变了某个响应式数据时,会触发重新渲染,调用渲染函数,调用渲染函数时,就会执行到上面的代码,从而将这一万条数据遍历一遍,即使你的users没有发生任何改变。scrtpt setup 是 vue3 的语法糖,简化了组合式 API 的写法,并且运行性能更好。原创 2023-11-22 17:08:01 · 65 阅读 · 1 评论 -
Vue性能优化:实现页面组件的懒加载
当页面存在多个test组件时,不使用懒加载,将会同时渲染,同时调用接口,会造成页面的卡顿,非常影响体验。而使用了懒加载后,只有当进入页面可视区域的test组件才会初始化渲染,提高页面加载速度。LazyLoader中,使用setTimeout是为了在组件初始化之前显示一个加载状态框,防止显示空白很突兀。懒加载组件需要设置宽度和高度和监听的组件高度宽度一致才能让加载框位于中心位置。懒加载组件LazyLoader。原创 2023-11-22 15:48:24 · 176 阅读 · 1 评论 -
Vue3技术总结
使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂/*收集用户鼠标点击的页面坐标*/// 初始化坐标数据// 用于收集点击事件坐标的函数// 挂载后绑定点击监听})// 卸载前解绑点击监听})<template><div></div><script>import {ref/*在组件中引入并使用自定义hook。原创 2023-11-22 17:10:35 · 1004 阅读 · 1 评论 -
Vue自定义拖拽指令
设置了v-drag的元素即可拖动,v-drag=dragBody表示拖动menu-outlined图标时,ref为dragBody的div会被拖动。原创 2023-11-22 17:01:51 · 94 阅读 · 1 评论