Vue爬坑笔记之六（优化）v-if和v-show区分使用场景。 computed和watch区分使用场景。 v-for遍

代码层面的优化

v-if和v-show区分使用场景。
computed和watch区分使用场景。
v-for遍历一定要添加key（在vue-cli3中不添加key会直接报错），设置唯一key值方便vue精准找到每一条数据，当状态发生改变，可以很快定位到新旧状态的diff

v-for遍历避免同时使用v-if。v-for比v-if优先级高，如果每次都遍历整个数组，会大大影响渲染速度。可以用computed代替

//推荐
<ul>
    <li v-for="user in activeUsers"
       :key="user.id"
    >
        {{user.name}}
    </li>
</ul>

computed:{
    activeUsers:function(){
        return this.users.filter( (user)=> user.isActive )
    }
}
//不推荐
<ul>
  <li v-for="user in users"
    :key="user.id"
    v-if="user.isActive>
    {{user.name}}
  </li>
</ul>

长列表性能优化
- vue通过Object.defineProperty对数据劫持,来实现数据的双向绑定.但有时我们只需要纯粹的数据展示,如果跳过了vue的劫持,就能显著地减少组件初始化的时间.这时我们可以通过object.freeze方法来冻结对象,就可以让vue不再劫持.
```
        export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};
```
事件销毁
- Vue组件销毁时，会自动清理它与其他实例的连接，解除它的全部指令以及事件监听器，但是仅限于组件本身的事件，对于js内的addEventListener等事件时不会自动销毁的，需要手动销毁以避免内存泄漏
```
    created(){
        addEventListener('click',this.click,false)
    },
    beforeDestroy(){
        removeEventListener('click',this.click,false)
    }
```
图片懒加载
- 如果图片过多，为了加速页面的加载速度，可以利用懒加载的方式，当滚动到可视区的时候再进行加载。类似插件有很多,这里举例Vue的vue-lazyload插件

    //安装插件 npm install vue-lazyload --save-dev
    //在主入口文件main.js中引入并使用
    import VueLazyload from 'vue-lazy-load'
    Vue.use(VueLazyload)
    //使用时可以直接添加配置
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: 'dist/error.png',
        loading: 'dist/loading.gif',
        attempt: 1
        })
    //使用时,将img标签的src属性改为v-lazy即可
    <img v-lazy="地址">

- 以上是vue-load插件的简单使用,可以去github上查看更多参数https://github.com/hilongjw/vue-lazyload

路由懒加载

第三方插件按需引入

如果只用到某个插件的某一个功能,直接引入整个插件就过于累赘,可以利用babel-plugin-component来引入插件中需要的部分,以减小项目体积.

//以引入element-ui为例
npm install babel-plugin-component//安装

//修改.babelrc文件
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
//在main.js中引入部分组件
import Vue from 'vue'
import {Button,Select} from 'element-ui'
Vue.use(Button)
Vue.use(Select)

优化无限列表或长列表
Vue SSR服务器端渲染

webpack层面优化

webpack对图片压缩
减少冗余代码
模板预编译
- 预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。
- 如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。
提取css(将所有组件的CSS提取到同一文件)
优化sourcemap

web技术优化

开启gzip压缩
浏览器缓存
使用CDN

转载自juejin.cn/post/684490… 作者:我是你的超级英雄