Vue开发中遇到的一些问题解决方法

1.vue圣杯布局切换视图组件时出现中间视图组件闪烁问题：因为中间有异步加载数据的部分，需要数据请求完成时才渲染底部Footer组件，否则可能会优先渲染底部footer，中间部分后显示造成闪烁。

2.使用vue自定义指令配合vuex可以实现控件粒度的权限控制，指令传入权限要求,可在组件逻辑中根据当前权限与传入的要求进行判断是否隐藏显示该div

<div id='aa' onclick="javascript:alert('管理员页面')" v-auth='admin'>跳转</div>

3.如在vue+elementui开发中发现表格行的默认勾选功能没生效，检查是否在表格渲染完毕且数据挂载上去之后再进行勾选。

4.vue中的 watch写了之后没有起作用，有可能是因为vue组件中存在2个watch，只能存在一个vue，后面的那个会覆盖前面的。

5.vnode节点没更新导致报错， 查看错误堆栈时源码中sameVnode函数报错找不到对应的值，强制更新表格：

 <el-table-column :key="col.name" :label="col.name"  v-for='(col,index) in costList' >
        <el-table-column prop="chargingFlag" min-width="80" label="是否开启" >
              <template slot-scope="scope">              
                  <span  :class="scope.row.costList[index].chargingFlag == '否' 
                 ?'red-cell':'black-cell'"
                  
                  >{{ scope.row.costList[index] && scope.row.costList[index].chargingFlag }}</span>
                </template>
            </el-table-column>
   </el-table-column>

解决方法：

 this.$set(this, "costList", res.costList); //触发数组响应式数据更新
     this.tableShow = false
      this.$nextTick(() => {
        this.tableShow = true
      })