Thinking -- vue性能优化:保持 props 稳定
2023-06-13 09:18:10 时间
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。
在 Vue 中,组件 props 的改变会导致组件更新。由此,确保组件 props 保持稳定,可以有效减少更新次数,提高效率。
示例:
<option
v-for="item in list"
:id="item.id"
:active-id="activeId" >
</option>
在 <option>
组件中,它使用了 id
和 activeId
两个 props 来确定它是否是当前活跃的那一项。虽然这是可行的,但问题是每当 activeId
更新时,列表中的每一个 <option>
都会跟着更新!
理想情况下,只有活跃状态发生改变的项才应该更新。我们可以将活跃状态比对的逻辑移入父组件来实现这一点,然后让 <option>
改为接收一个 active
prop:
<option
v-for="item in list"
:id="item.id"
:active="item.id === activeId" >
</option>
至此,对于大多数的组件来说,activeId
改变时,它们的 active
prop 都会保持不变,因此它们无需再更新。
总结一下,这个技巧的核心思想就是让传给子组件的 props 尽量保持稳定。
相关文章
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- vue上传图片组件编写
- VUE v-for 数据引用
- 请简述什么是Vue组件化开发_vue组件化开发
- vue项目性能优化-前端加分项
- react 子组件向父组件传值_vue父组件给子组件传值
- vue中map用法_vue里面的meta用法
- 用了vue还需要jquery吗_vue与react的区别
- Vue生成二维码_vue视频软件怎么生成二维码
- Vue分页导航_vue分页组件
- Vue生成二维码_vue通过二维码分享
- Vue(renren-fast_vue_master)项目目录结构[通俗易懂]
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
- 使用 Vue.js Devtools 扩展作为 Vue 应用调试工具
- Vue响应式依赖收集原理分析
- Vue子组件向父组件传值this.$emit()
- vue-cli3项目搭建配置以及性能优化
- vue-cli3项目搭建配置以及性能优化
- vue入门篇之Vue.js 组件
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- 安装Vue on Linux:轻松搭建开发环境(linux安装vue)
- linux下快速部署Vue项目(linux部署vue)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue应用中部署Redis(vue中使用redis)