vue项目笔记

2024年2月9日 236次阅读 来源: Fury

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

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

2、 vue-router 切换

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

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

vuex  props   eventBus

4、 数组更新检测

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

5、 vue排坑之this

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

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

7、 动态样式绑定

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

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

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

9、 前端权限设置

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

10、 虚拟DOM

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

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

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

12、 assets和static的区别

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

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

14、 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 )
}

15、 js跳出循环

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

16、Sass rem换算比率

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

17、样式穿透

css穿透使用 >>> 
  .form-item >>> .el-input__inner{
     height: 36px;
     line-height: 36px;
   }
 sass穿透 /deep/
 .form-item /deep/ .el-input__inner{
     height: 36px;
     line-height: 36px;
   }
    原文作者：Fury
    原文地址: https://segmentfault.com/a/1190000020267978
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞