在Vue中遇到的各种坑 及性能提升

本文探讨了Vue中提升性能的方法,如避免不必要的组件更新、使用异步组件、硬件加速等,同时解决了一些常见的问题,比如如何处理后续元素的样式应用、Better-scrollclick导致的点击事件重复触发以及样式作用域限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue:

 

(1)    没有再模板里引用data数据,会不会引起update、beforeUpdate生命周期函数的执行?

不会

(2)组件改成异步

(3)v-once

(4)如果不用template属性,直接在页面上写组件名,有些浏览器会把这些非法命名的组件解析错误,这是需要在标签内写正常的标签名,写is属性 is=‘组件名’

 

 

 

提高性能:

如果不需要响应式,直接在Vue实例里挂载一个属性就可以

例如:

This.y=2

 

 

 

这样修改数据,操作是异步的,是为了提高性能,所以数据更新之后的渲染dom是有延迟的

This.xxx=…

 

所以如果想要得到渲染之后的dom,可以用nextTick方法

 

 

Vue项目遇到的问题:

后续添加的元素无法添加样式,因为scoped限制,只要在样式中添加>>>

例如 >>>span

 

 

Better-scroll click:true 会导致点击事件触发两次,如果不滑动,点击事件会触发两次,滑动之后better-Scroll会将默认的点击事件干掉,并会自动派发一个点击事件,这时点击事件就只会触发一次

 

:style用不了过滤器

 

 

硬件加速:

触发硬件加速  

例如在transform中即使用不到z轴也要加上z轴,x,y,z三个轴都要激活

 

 

如果本文对您有帮助,请抬抬您的小手,点下右下角的推荐, ^-^,当然如果看了这篇博客对您有帮助是我最开心的事,毕竟赠人玫瑰,手有余香, ^-^,如果这篇博客没有帮助到您,那就只能说一声抱歉啦

 

转载于:https://www.cnblogs.com/katydids/p/9955490.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值