vue页面性能优化（vue 性能优化）

今天给各位分享vue页面性能优化的知识，其中也会对vue 性能优化进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、Vue性能优化方法
• 2、vue 页面多模块，优化加载速度
• 3、第 005 期 Vue 运行时性能优化之减少渲染组件的次数

Vue性能优化方法

Vue前端开发到第一阶段，就要开始考虑性能优化相关的要点了。这也是用来判断一名前端的水平是否优秀的一个标准。接下来这篇文章，将介绍几种在实践过程中可以用到的性能优化技巧（文中例子来自 ）。

由于组件的生命周期处理在框架层面上十分耗时，所以，建议平常尽量使用函数型组件。这样，可以避免不必要的性能损失。只要在模板上声明 functional 属性，就可以实现函数式组件了：

另一个优化技巧是，将复杂的耗时计算处理放在子组件中进行处理：

平常在引用 computed 数据进行计算的时候，可以多使用局部变量，这样可以避免多次重复计算。

对于需要频繁切换的视图来说，使用 v-show 比 v-if 更加节约性能。因为 v-show 可以避免dom节点的销毁和重建，所以我们可以将如下的例子

改写为

另外一种很常用的优化技巧是使用 keep-alive ，通常是在路由切换组件中使用：

使用 keep-alive 后，可以保留组件状态并且避免重新渲染。

下面这个性能优化的点是前端通用的，可以用 requestAnimationFrame 分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染。

比如下面这个例子：

可以改写为：

对于复杂的数据结构，我们可以显式声明为非响应式，这样可以避免很多不必要的计算，从而提高性能：

对于无限长列表来说，性能优化主要方法是保持仅渲染可视化部分。

来看一下下面这个例子：

这是最常见的写法，不过如果列表的内容很多，你就会发现页面十分的卡顿。此时大家可以利用 vue-virtual-scroller 这个组件，进行优化：

这样，可以大大提升组件的流畅度和性能。

vue 页面多模块，优化加载速度

       import Vue from'vue'；

       import Router from'vue-router' ；

       import HelloWorld    from'@/components/HelloWorld' ；

       Vue.use(Router)；

       export defaultnew Router({

         routes: [

          {

              path: '/',

              name: 'HelloWorld',

              component:HelloWorld

           }

         ]

       })

import Vue from 'vue'

import Router from 'vue-router'/* 此处省去之前导入的HelloWorld模块 */

Vue.use(Router)

export defaultnew Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: resolve=(require(["@/components/HelloWorld"],resolve))

    }

  ]

})

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=import("@/components/HelloWorld")

export defaultnew Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component:HelloWorld

    }

　]

})

原始写法：

One-com/One-com 1111

One-com/One-com 1111

One-com/One-com 1111

One-com/One-com 1111

One-com/One-com 1111

One-com/One-com 1111

template

  div class="hello"

  One-com/One-com

  1111

  /div

/template

script

import One from './one'

export default {

  components:{

    "One-com":One

  },

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

/script

const 写法

template

  div class="hello"

  One-com/One-com

  1111

  /div

/template

script

const One = ()=import("./one");

export default {

  components:{

    "One-com":One

  },

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

/script

异步写法：

template

  div class="hello"

  One-com/One-com

  1111

  /div

/template

script

export default {

  components:{

    "One-com":resolve=(['./one'],resolve)

  },

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

/script

One-com/One-com 1111

总结：

路由和组件的常用两种懒加载方式

1.vue异步组件实现路由懒加载

component: resolve=(['地址'], resolve)

2.es提出的import（推荐使用）

const HelloWorld = () = import('地址')

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件:

标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动态组件，可以缓存组件的渲染结果，保证同一个组件只被渲染一次。优化写法如下:

v-if 有更高的切换开销。 v-show 有更高的初始渲染开销，其值变化时，内容并不会重新渲染。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

插槽的数据发生改变时，旧的插槽写法，会导致插槽父组件的更新，插槽组件也就更新了。新的插槽写法只会更新插槽组件，少了更新父组件这过程。

旧的插槽写法:

Vue 2.6 加了新的插槽写法: v-slot 。如下:

了解更多插槽新写法的内容，见 Vue 2.6 发布了 。

vue页面性能优化的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue 性能优化、vue页面性能优化的信息别忘了在本站进行查找喔。