1. 组件生命周期钩子函数

应该防止在 beforeCreate 和 created 生命周期时产生全局副作用的代码。
例如：
其中应用 setInterval 设置 timer。在纯客户端 (client-side only) 的代码中，咱们能够设置一个 timer，而后在 beforeDestroy 或 destroyed 生命周期时将其销毁。
然而，因为在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了防止这种状况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。

2 路由懒加载。

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export function createRouter () {  return new Router({    mode: 'history',    routes: [      { path: '/', component: () => import('./components/Home.vue') },      { path: '/item/:id', component: () => import('./components/Item.vue') }    ]  })}

3 应用Ui框架上按需引入，按需加载。

routes: [    { path: "/", redirect: "index" },    {    path: "/",    name: "home",    component: resolve=>require(["@/views/home"],resolve),    children: [      {        // 员工查问        path: "/employees",        component: resolve=>require(["@/components/employees"],resolve)      },    {      // 首页      path: "/index",      component: resolve=>require(["@/views/index"],resolve)    },

4 gzip压缩

cnpm i compression-webpack-plugin -D

在 vue.congig.js中引入并批改 webpack配置:~~~~

    const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => {        if (process.env.NODE_ENV === 'production') {            // 为生产环境批改配置...            config.mode = 'production'            return {                plugins: [new CompressionPlugin({                    test: /\.js$|\.html$|\.css/, //匹配文件名                    threshold: 10240, //对超过10k的数据进行压缩                    deleteOriginalAssets: false //是否删除原文件                })]            }        }

在index.js中退出如下代码

productionGzip: false,    productionGzipExtensions: ['js', 'css']

5 应用cdn

<body><script src="https://unpkg.com/vue/dist/vue.js"></script>script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script><div id="app">     </div></body>

而后在webpack.base.conf.js中退出externals

module.exports = {    context: path.resolve(__dirname, '../'),    entry: {    app: './src/main.js'    },externals: {'jquery': 'jQuery',    'element-ui':'ELEMENT',     'vue': 'Vue'
  1. 代码方面
  • v-if 和 v-show依据场景抉择应用。
  • 为item设置惟一key值，在列表数据遍历渲染时，为每一项item设置惟一的key,不便vue外部准确的找到该item,当state更新时，新的状态值和旧的状态值进行比照，较快的定位到。

  1. 用户体验上动手。

    • 应用better-click.js，解决Iphone,点击有300毫秒的问题。
    • 菊花Loading。
    • 骨架屏。