vue项目笔记

本文主要对vue项目研发中的问题积累及解决思路记录，若有问题或者更好的解决方案，请指点下
一、 vue多重请求异步问题。

解决方案：1.迭代转同步    影响运行速度，效率较低；
      2.promise.all(iterable) ：依旧是异步实现，效率相同  =》参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

二、 vue-router 切换

先加载新的组件，等新的组件渲染好但还没挂载前，销毁旧组件，挂载新组件；
    新組件： beforeCreate
    新組件： created
    新組件： beforeMount
    舊組件： beforeDestroy
    舊組件： destroy
    新組件： mounted
 Ps：跨组件传值尽可能使用vuex;

三、 vue 数据传递 => https://blog.csdn.net/sinat_1...

vuex  props   eventBus

四、 数组更新检测

Push（）能够直接更新到页面
 使用索引赋值或者改变数组长度时可使用$set或splice（）方法。
 ‘=’赋值可以使用nextTick()函数

五、 vue排坑之this

通常使用箭头函数，普通的function须要观察this对象指向。
Axios请求时this指向不是vue而是undefined
原始写法：bind(this) 》》》改变匿名函数的指向对象
      Hack写法 》》》var _this = this;
现写法：箭头函数  ==》
原理：es6箭头函数中的内部this是词法做用域，由上下文肯定（即外层调用者vue）

六、 position: sticky CSS样式技巧 页面上划悬浮标题

七、 动态样式绑定

v-bind:class="['tab-button', { active: currentTab === tab }]"  动态类名绑定，等同于addClassName  removeClassName;

八、 tab切换菜单 实现 ====》 动态组件 写法案例：https://jsfiddle.net/o3nycadu...

<component
     v-bind:is="currentTabComponent"
     class="tab"
  ></component>
 <keep-alive> </keep-alive>  ==》用于组件不受v-if干扰，缓存组件原有状态。也可在组件注册时，能够在组件后添加keepalive参数，方便作部分缓存。

九、 前端权限设置

Vue-router必需要在vue实例化以前挂载上去，vue2.0能够经过addRoutes实现前端路由的动态改变。
  刷新新增页面丢失的问题解决方案：一、将路由地址列表存在本地，加载以前判断，无信息就从本地获取，二、信息丢失从后台从新获取地址列表

十、 虚拟DOM

虚拟DOM能够提升运行效率，避免js频繁操做dom而产生的卡顿问题。
  参考文献：https://www.cnblogs.com/fuGuy/p/9220106.html

十一、 大型spa项目状态量方案：

A、    router属性meta中传入字面量对象
{path：'index',component:Index,meta:{showBtn:true}}
B、    设置全局状态  :vuex

十二、 assets和static的区别

assets中存放的静态文件是会通过webpack处理的，通常放一些图片之类的静态资源，而static则不会收到webpack的影响，调用的时候也是经过绝对路径调用的，一般用来存放一些第三方的静态资源库。项目中调用static中的静态资源时，可能会出现打包后加载失败的问题。引用本地能够将资源放在src下面，以免因为打包后根目录而致使地址变化的问题。

1三、 v-cloak： 防止页面加载时出现 vuejs 的变量名。

1四、 table内tbody滚动（威易网CSS教程）
table tbody {

display:block;
height:195px;
overflow-y:scroll;

}
table thead, tbody tr {

display:table;
width:100%;
table-layout:fixed;

}
table thead {

width: calc( 100% - 1em )
}

1五、 js跳出循环

forEach()没法在全部元素遍历完以前终止循环，不支持break、continue关键字
 解决方案：renturn false能够不执行当前循环指令如下的代码，能够充当continue；
    Try catch抛出异常可跳出循环，起到break的做用；

1六、Sass rem换算比率

@function rem($val){
  return $val/25*1rem
 }

1七、样式穿透

css穿透使用 >>> 
  .form-item >>> .el-input__inner{
     height: 36px;
     line-height: 36px;
   }
 sass穿透 /deep/
 .form-item /deep/ .el-input__inner{
     height: 36px;
     line-height: 36px;
   }

1八、elementui table head边界不对齐问题：

body .el-table th.gutter{display: table-cell!important;}