优化VUE性能优化

Posted 2022-12-13

【优化】VUE性能优化

一、v-for遍历必须为item添加key，且避免同时使用v-if

二、长列表性能优化

Object.freeze

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

export default
  data: () => (
    users:
  ),

  async created()
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
 
;
三、Vue组件中的data是函数而不是对象

export default
  data()
    // data是一个函数,data: function() 的简写
    return
      // 页面要初始化的数据
      name: bartonwang,
    ;
  ,
;

而非如下所示：

export default
  data:
    // data是一个对象
    name: bartonwang,
  ,
;

当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例，复用在多个页面。

如果data是一个纯碎的对象，则所有的实例将共享引用同一份data数据对象，无论在哪个组件实例中修改data，都会影响到所有的组件实例。

如果data是函数，每次创建一个新实例后，调用data函数，从而返回初始数据的一个全新副本数据对象。

这样每复用一次组件，会返回一份新的data数据，类似于给每个组件实例创建一个私有的数据空间，让各个组件的实例各自独立，互不影响，保持低耦合。
 

七、不要将所有的数据都放到data中

data中的数据都会增加getter和setter，又会收集watcher，这样还占内存。不需要响应式的数据我们可以定义在实例上。

 

参考

​​10个vue性能优化技巧_树耳188的博客vue 性能优化​​