vue 常见优化手段
文章目录
- vue常见的优化手段
-
- 前言
- 使用key（避免明明相同的dom，每次更新都要重新生成）
- 使用冻结的对象（避免无意义的响应式数据）
- 使用函数式组件（减少vue组件实例的生成）
-
- vue3
- vue2
- 使用计算属性（减少数据计算的次数）
- 非实时绑定的表单项（避免表单过多触发监听事件）
- 保持对象的引用稳定（避免无意义的组件重新渲染）
- v-show 替代 v-if （避免频繁的新增和删除元素）
- 延迟装载 defer （防止页面内容过多，通过设置渲染内容的优先级，让用户提前看到优先级最高的内容）
vue常见的优化手段
前言
优化是当页面出现问题或者效率过低采取的手段，任何优化不是没有代价，或许需要更多的开发时间，或许可维护性可扩展性会降低。所以，不要过度优化。
使用key（避免明明相同的dom，每次更新都要重新生成）
对于通过循环生成的列表，应该给每个列表项生成一个稳定而且唯一的key值，这有利于列表在变动时，尽量少的删除、新增、改动元素
使用冻结的对象（避免无意义的响应式数据）
冻结的对象不会被响应化。实际开发过程中，可能拿到的数据是非常复杂的，而且这个对象的数据不需要改动，只是在页面做展示，这个时候可以使用将对象冻结，这样vue就不会去遍历整个对象。
const obj = {
a:1,b:2,name:'dx' other:{
.....}}
Object.freeze(obj)
// 可以通过 Object.isFrozen 来判断是否被冻结
Object.isFrozen(obj) // true
适用于vue2，因为在vue3中，可以主动不使用ref或者reactive等
export default {
data: {
return {
freezeData: []
}
},
mounted() {
this.freezeData = Object.freeze(this.getDataList())
}
}
尤其是当数据超量的时候，使用freeze冻结后再渲染数组，会有明显效果。
使用函数式组件（减少vue组件实例的生成）
假如某个vue组件不存在自己的状态，存靠父组件传递参数，然后渲染。可以考虑使用函数式组件。
如果是函数式组件，vue不会为这个函数式组件创建一个组件实例，这样就节省了大量的工作。
vue3
官方介绍：https://cn.vuejs.org/guide/extras/render-function.html#functional-components
具名函数式组件
import type {
SetupContext } from 'vue'
type FComponentProps = {
message: string
}
type Events = {
sendMessage(message: string