vue有什么性能优化方法

性能优化方法有：

1、使用“v-slot:slotName”；

2、避免“v-for”和“v-if”同时使用；

3、始终为“v-for”添加key，并且不要将index作为的key；

4、使用延迟渲染等等。

组件懒加载
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常地大，造成进入首页时需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

支持组件可见或即将可见时懒加载
支持组件延时加载
支持加载真实组件前展示骨架组件，提高用户体验
支持真实组件代码分包异步加载

长列表性能优化

Vue会通过Object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要Vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止Vue劫持我们的数据呢？可以通过Object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

非响应式数据

初始化时，Vue会对data做getter、setter改造。在Vue的文档中介绍数据绑定和响应时，特意标注了对于经过Object.freeze()方法的对象无法进行更新响应。

九、函数式组件
函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加functional声明即可。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

组件需要的一切都是通过context参数传递。它是一个上下文对象，具体属性查看文档。这里props是一个包含所有绑定属性的对象。

v-for元素绑定事件代理

事件代理作用主要是2个：

1. 将事件处理程序代理到父节点，减少内存占用率。
2. 动态生成子节点时能自动绑定事件处理程序到父节点。

• 不使用事件代理，每个span节点绑定一个click事件，并指向同一个事件处理程序：