Vue性能优化

 

1、我们可以直接在data函数return之前直接this.xxx的方式挂在实例上,在methods中还可以访问, 但是又不会触发响应式跟踪;

改写后变成这样:

data() {
  this.logInStatus =  false, // 仅在methods中使用,未在视图层中使用，不要定义在return中
  return {
     title: '性能优化' // 这个视图层需要用到
  }
}

2、v-if和v-show

if根本不会渲染该元素，所以某些想藏起来的htlm元素尽量用v-if

而一些可能通过不同切换来实现显隐的就可以用v-show了，因为v-show无论true or false都会进行一次渲染

总结：显隐频率高用v-show，反则v-if

3、Router里面配置可以加上

普通写法：

import Login from '@/components/Login'
{
        path: '/Login',
        name: 'Login',
        component: Login
},

 优化：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 注册vue-router

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
    mode: 'history',
    base: '/GeSmart/',
    routes: [
        {
            path: '/',
            name: 'Login',
            component: (resolve) => require(['@/viewsGS/Login.vue'], resolve),
            meta: { requireAuth: false },
        },
        {
            path: '/Home',
            name: 'Home',
            component: (resolve) => require(['@/viewsGS/Home.vue'], resolve),
            meta: { requireAuth: false },
        }
    ]
})

简化

Vue.use(Router)

let routes = []

let r = ['','install', 'start', 'log', 'input', 'button', 'select', 'switch', 'form', 'colorpicker', 'loading',
    'icon', 'timeline', 'theme', 'react-kui', 'angular-kui', 'alert', 'message', 'notice', 'upload', 'poptip', 'menu', 'tabs', 'badge',
    'checkbox', 'radio', 'datepicker', 'table', 'layout', 'page', 'modal', 'kyui-loader', 'sponsor', 'about'];
r.forEach((x) => {
    routes.push({
        path: `/${x}`,
        component: resolve => require([x==''?'./ui/index':`./ui/${x}`], resolve),
        // component: r => require.ensure([], () => r(require(x==''?'/ui/index':`./ui/${x}`)), x)
    })
})

let routers = new Router({ routes: routes, mode: 'history' })
export default routers

4、v-for尽量避免v-if一起用

因为：v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。

v-for一定记得绑定唯一的key