前端代码层的性能优化

1、v-if 和 v-show 区分使用场景

区别
手段：
v-if是通过控制dom节点的存在与否来控制元素的显隐；
v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；

使用场景
基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好。
如果在运行时条件很少改变，则使用 v-if 较好。

总结：
v-if判断是否加载，可以减轻服务器的压力，在需要时加载，但有更高的切换开销;
v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

对于管理系统的权限列表的展示，这里可以使用v-if来渲染，如果使用到v-show，对于用户没有的权限，在网页的源码中，仍然能够显示出该权限，如果用v-if，网页的源码中就不会显示出该权限。（在前后台分离情况下，后台不负责渲染页面的场景。）

<el-form-item v-if="isAdmin" class="wd5" label="是否禁言">
   <el-radio v-model="eventInfo.forbiddenWords" :label="true">是</el-radio>
   <el-radio v-model="eventInfo.forbiddenWords" :label="false">否</el-radio>
</el-form-item>

对于前台页面的数据展示，这里推荐使用v-show，这样可以减少开发中不必要的麻烦。

<div class="hot-tags">
        <el-tag v-for="(item, index) in navs" :key="index"
        v-show="index < 7 || expand"
        :type="selectedTags.includes(item) ? 'success' : 'info'"
        @click.native="clickHotTag(item)">{{item}}</el-tag>
        <el-tag v-if="navs.length > 8 && !expand" type="info"
          @click.native="expand = true">更多
          <i class="el-icon-caret-bottom"></i>
        </el-tag>
</div>

2、computed 和 watch 区分使用场景

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch：更多的是观察的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

computed适用于动态计算data里的属性值，必须加return，不能对data里的属性进行赋值，当无变化时会先从缓存里读取。

使用场景：当一个值受多个属性影响的时候

computed: {
      ...mapGetters(['token', 'userInfo', 'permissions', 'getWechatSignUrl']),
      isAdmin () { 
        return this.eventInfo.liveStatus === 1 || this.permissions.includes('event')
      },
      isAuthDel () { 
        return this.permissions.includes('event')
      }
    },

watch是监听data里的值的变化，当data中的属性发生改变的时候，watch中的函数就会执行，有两个参数，前者是newVal，后者是oldVal。当监听引用类型数据的变化，需要进行深度监听（用handler + deep的方式进行深度监听。immediate:true 页面首次加载的时候做一次监听。

使用场景：当一条数据的更改影响到多条数据的时候

watch: {
      '$route.query.id' (val) {
        this.params.pageNum = 1
        this.params.id = val
        this.fetchData()
      }
    }

监听多个值的变化时，watch需结合computed使用

computed: {
   info() {
      const { password, userCode } = this
      return {
          password,
          userCode
      }
   },
   //直接对一个对象尽行深度接听多个属性值
   obj(){
       return JSON.parse(JSON.stringify(object))
   }
   
},
watch:{
    info:{
       handler: function(newval , oldval) {
          if(newval.password && newval.userCode){
            this.sign = true
          }else{
            this.sign = false
          }
       },
       deep:true
   },
   obj{
       handler: function(newval , oldval) { xx },
       deep:true
   }
}

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

v-for 遍历必须为 item 添加 key
　　在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。
当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 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(function (user) {
     return user.isActive
    })
  }
}

//不推荐：
<ul>
  <li>
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>