vue 常见优化手段

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