关于vue组件内部代码的性能问题, 我想说几句

最新推荐文章于 2024-03-26 21:54:31 发布
最新推荐文章于 2024-03-26 21:54:31 发布
阅读量226 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43340606/article/details/119774539
版权

 1. data里面只放reactive的数据, 不需要响应式变化的数据，放created里面

 

 或者放在data函数中

 可以提高代码清晰度和性能

放到data的return里面了，vue框架会做一层代理，各种监听和劫持数据的变化, 并且每个属性都会多执行几十行代码的，还多占用内存

2. api请求的方法，尽量放mounted中

原因: 

a.在服务端渲染的情况下, created是服务端调用, mounted是客户端调用.如后期转换成服务端渲染维护起来麻烦. 

b. 在客户端渲染时, 虽然你在created中请求api数据, 但是在底层原理中也是在mounted执行的时候才能拿到请求到的数据.  所以放在mounted中更合理

 3. 非常耗时的计算才放在computed中, 一些简单的拼接就直接放在methods中

原因: 每定义一个计算属性, 就会占用一个空间, 且底层逻辑为了实现计算属性的功能特性，每个属性会多执行几十行代码

4. watch一般用来处理副作用, 建议少用watch

stubborn丶lili
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue性能优化
weixin_45752307的博客
06-02 146
Vue性能优化 v-for中使用一个唯一标识绑定key（尽量不要与索引绑定） 代码如下所示，虽然在页面上渲染的内容一样，但是底层区别不同 <div id="app"> <div v-for="(item,index) in imgList" :key="item">{{item}}</div> //√ <div v-for="(item,index) in imgList" :key="i">{{item}}</div&g
Vue组件间调用的理解、性能对比。
梦不止步的博客
07-09 1518
组件间的互动大概有这几种情况： 1.父子间的互动：watch，props，$emit，这几个属性，可以涵盖父子组件间的互动。     父页面中：            &lt;el-row :style="{height : scrennHeight}"&gt;                 &lt;el-col :span="4"&gt;                     &lt;...
12 个 Vue 开发中的性能优化小技巧，层层深入
最新发布
2401_83740107的博客
03-26 869
我们知道 Vue 是单页应用，所以如果没有用懒加载，就会导致进入首页时需要加载的内容过多，时间过长，就会出现长时间的白屏，很不利于用户体验，SEO 也不友好。图片懒加载就是对于有很多图片的页面，为了提高页面加载速度，只加载可视区域内的图片，可视区域外的等到滚动到可视区域后再去加载。来把组件缓存起来，在组件切换的时候不进行卸载，这样当再次返回的时候，就能从缓存中快速渲染，而不是重新渲染，以节省性能。所以可以去用懒加载将页面进行划分，需要的时候才加载对应的页面，以分担首页的加载压力，减少首页加载时间。
vue中v-model过多会造成哪些严重后果
liuhao9999的博客
02-22 278
绑定到同一个数据属性，而这些数据属性又在不同的组件或实例中被使用，那么可能会出现数据一致性问题。这可能会导致界面显示的数据与实际数据不一致，从而引发错误或不可预测的行为。在 Vue 组件中，如果组件没有被正确销毁，它所占用的内存可能不会被释放，从而导致内存泄漏。的数量过多，特别是在大型列表或复杂的组件结构中，这可能会导致性能下降，特别是在数据更新频繁的情况下。都需要对应的数据属性和方法来处理输入和输出，这可能会增加代码的复杂性。都会创建一个数据监听器，用于监听数据的改变并触发视图的更新。
VUE性能优化（害太多了 就大体总结一哈子）
wennianzhu的博客
07-31 488
编码优化： （1）不要将所有数据都放在data中（因为data中的数据都会增加getter和setter，会收集对应的watcher）； （2）SPA页面采用keep-alive缓存组件； （3）数据持久化问题（防抖，节流）； （4）v-for中key保证唯一性并且如果v-for时给每项元素绑定事件需要用事件代理。 加载性能优化： （1）第三方模块按需导入； （2）图片懒加载（lazyload unload事件做预加载）； （3）滚动到可视区域动态加载（默认只渲染三屏 当前看到的 上一页 下一页 别的用空.
Vue组件化实例代码
qq_55278081的博客
08-16 177
代码】Vue组件化实例代码。
Vue组件内部实现一个双向数据绑定的实例代码
10-17
总结一下，Vue组件内部实现双向数据绑定主要依赖于以下几点： 1. 使用`props`将父组件的数据传递给子组件。 2. 子组件通过`$emit`触发事件，携带数据返回给父组件。 3. 父组件监听子组件的事件，并根据接收到的数据...
加速vue组件渲染之性能优化
10-15
在开发过程中，优化Vue组件的渲染速度对于提高应用性能至关重要。本文将深入探讨如何优化Vue组件的渲染性能，特别是针对包含大量表格和复杂数据结构的情况。 首先，我们要理解Vue的响应式系统。Vue通过`...
关于Vue实现组件信息的缓存问题
08-29
Vue 组件缓存是前端开发中一个常见的问题，特别是在使用 Vue 框架时。缓存组件信息可以避免在路由切换时重新加载数据，提高用户体验。但是，如何实现 Vue 组件缓存呢？下面我们将详细讲解 Vue 组件缓存的实现方法。...
关于vue组件内部命名规范的一些思考和意见
01-20
开局感慨一下，一转眼玩vue已经三年了。平时都是搬砖搬砖搬砖。。。死循环那种。很少写博客，因为我觉得好像没啥好写的，官方文档写的清清楚楚，明明白白。工作中遇到的问题，大部分在官方文档里能找到答案，如果你...
Vue实现内部组件轮播切换效果的示例代码
08-27
Vue 实现内部组件轮播切换效果的示例代码 本文主要介绍了使用 Vue 实现内部组件轮播切换效果的示例代码。该示例代码可以满足在不需要路由的情况下，希望在内部组件切换时增加一个轮播过渡的效果。 首先，我们可以...
Vue-性能优化
s8806479的博客
04-30 686
优化分打包体积优化和运行时优化，以下都是运行时优化。 使用key 对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素 使用冻结的对象 冻结的对象不会被响应化 使用函数式组件 参见函数式组件 使用计算属性 如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们 非实时绑定的表单项 当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能
Vue学习计划十一：了解Vue性能优化以及组件懒加载、异步组件和代码分割
小创果技术交流博客
03-28 1165
Vue是一款性能出色的现代化JavaScript框架，但是在应用规模增大时，会出现性能问题。为了解决这些性能问题，我们可以采取一些优化措施，如优化渲染性能、优化内存占用、优化资源加载等。此外，Vue还提供了组件懒加载、异步组件和代码分割等技术，可以进一步提高应用的性能和用户体验。在实际开发中，我们应该根据应用的具体情况选择合适的优化措施和技术，避免过度优化和过度工程化。同时，我们也应该关注新的技术和工具，不断学习和实践，提高自己的技术水平和解决问题的能力。
vue项目性能优化
奋斗的小猪
02-19 369
一、代码优化 1、v-if 和 v-show 　　v-if 是懒加载，当状态为 true 时才会加载，并且为 false 时不会占用布局空间； 　　v-show 是无论状态是 true 或者是 false，都会进行渲染，并且只是简单地基于 CSS 的 display 属性进行切换，并占据布局空间。对于在项目中，需要频繁调用，不需要权限的显示隐藏，可以选择使用 v-show，可以减少系统的切换开销。 　　在我来看要分两个维度去思考问题： 　　第一个维度是权限问题，只要涉及到权限相关的展示无疑要用v.
vue性能优化
m0_69740976的博客
11-07 1151
vue性能优化
Vue常用性能优化
WindrunnerMax
11-14 519
Vue常用性能优化 Vue常用的一些优化方式，主要是在构建项目过程需要注意的方面。 编码优化 避免响应所有数据 不要将所有的数据都放到data中，data中的数据都会增加getter和setter，并且会收集watcher，这样还占内存，不需要响应式的数据我们可以直接定义在实例上。 <template> <view> </view> </template> <script> export default {
关于 在vue项目中的一次 性能调优
m0_48940868的博客
09-16 397
项目场景： 还是上篇文章提到的项目，前不久本地测试无异常，现在已经在线上运行了，但是好日子（摸鱼）没过多久， 后端就找上门了… 后端：现在线上由于并发请求太多了，要是有那么一两个请求响应慢了一点的话，非常容易超时然后挂掉。 理想的我：请求响应慢也找我，真当我前端好欺负？ 真实的我：行吧大哥，那我这边控制一下同时请求的次数，做一个分批次请求，你看这样行不？ 后端：这还差不多，别一次性给我那么多请求，我处理不过来，我不想改代码 理想的我：我X你XX的，你不想改就丢给我，才13个请求就整不动了？想想双11人家的后
vue项目你一定会用到的性能优化！
weixin_46837985的博客
06-29 295
作者：好学习吧丶https://juejin.cn/post/7089241058508275725提起性能优化很多人眼前浮现的面试经验是不是历历在目呢？反正，性能优化在我看来他永远是前端领域的热度之王。而本渣最近维护的项目恰巧在这个方向下了很大功夫，一些经验之谈奉上，希望对大家有些许帮助！性能优化标准既然说性能优化，那他总得有一个公认的标准，这就是我们很多次听到的Li...
vue组件内部引用依赖 unknow
05-10
Vue组件内部引用依赖unknow表示出现了依赖未定义的情况...总结来说，解决Vue组件内部引用依赖unknow的问题需要仔细检查代码逻辑、依赖的设置和版本兼容性等方面。只有确保所有依赖都正确安装和加载，才能避免这种错误。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值