vue使用小结

2024年1月3日 191次阅读 来源: 蓝天海礁
安装，webpack基本配置等基础官网够详细了，略

1.路由：

——路由懒加载（按需加载）：
const Home = r => require.ensure([], () => r(require('../pages/home/home.vue')), 'Home');

推荐博文

好处就是到哪个页面加载对应的路由，节省资源，提高访问速度。

——路由跳转：
router-link:面试时问过好多这个问题，组件和router-link上面想写点击事件怎么写，大多数都回答：直接写啊… 正确姿势：@click.native="func"
刚用vue的时候，不太习惯所有东西都尽量使用它的语法。有一次有个页面需要从哪来，保存的时候还返回到哪里去。当时第一时间想的就是

location.back();location.go(-1);

幸好当时，一个实习的产品发现了bug。在IOS手机上面，列表页a编辑进入b，b页面点击保存后返回到列表页a，列表页a的数据并不更新，安卓都正常。百思不得姐，度娘了一波。使用了vue的

this.$router.go(-1);this.$router.back();

就OK了。不清楚原因

——监听来源路径及去向路径
用到两个钩子：beforeRouteEnter的from.path和beforeRouteLeave的to.path
场景：产品需求：下单时如果点击返回就popup提示，提示用户再想想，还是确定离开。此时beforeRouteLeave判断只要to.path不是下行页面就阻断，参数next(false)即可阻断。
——有个问题就是，IOS的侧滑会有延迟，当在下单页面侧滑返回的时候，会先返回上个页面，延迟一会之后再回来。目前没发现可行办法(移动端touch事件禁用过，与侧滑是两码事，不在一个层级)。
——京东、天猫的是，下单及下行页面，禁用侧滑，其他页面正常使用(毕竟我们不是app，禁用不了)
——当然，这些都是为了用户体验。如果有合适办法，可讨论。
——监听来源：刚刚说了beforeRouteEnter的from.path,但是外部链接直接访问vue项目，拿到的from.path是 “/”,
——如果有很多渠道访问我们项目，就无法区分了。
——解决办法：
1.进入我们项目必须携带来源参数，每个渠道都必须传递不同参数。
2.当然，如果公司本来就招商，别人又不愿意配合，那么不必太强求。JS提供了一个方法,
document.referrer获取来源路径，前提是别人进入我们项目是通过,href属性进来的。比如a标签，location.href

2.webpack打包：

查看各个模块的打包后的占用空间：
运行：

npm run build -report

执行完之后会自动弹出模块占用空间页面，打包前及打包后的。发现相同模块多次渲染，那就去重咯.最常见的公共组件，多人引用，组件内部又引用其他资源，这时把此公共组件 按需加载即可。

3.keep-alive缓存模式

初次使用：解决列表页返回记录位置。搭配钩子：activated
之前讨论过这个

一些坑的补充说明：
产品设计要求：前进刷新数据，返回记录位置(刷新与否都可),那么在
beforeRouteLeave钩子里面要进行一些判断，判断需要记录位置的页面b的入口有哪些。


beforeRouteLeave(to, from, next){
  this.isOk = false;
  if (to.path == "/a" || to.path == "/c") {
    this.isOk = true;
  }
  next();//这个一定要写
}

activated钩子需要做的是把所有的数据初始化(跟第一次进入页面一样)：

activated(){
  if (this.isOk) {
    this.dataList = [];
    this.pageNum = 1;
  }
}

原因就是该模式下，created,mounted只触发一次,数据都在缓存中，如果不手动清空，数据不会更新，用了activated无需这俩货了

4.能用computed替代watch的，尽量都使用computed

官网也有说明

是尽量，不是一定。性能和代码方便computed还是挺有优势的.
场景：
购物车，价格计算(一般后端算，淘宝无网络前端算好，优惠在订单)，
页面多个输入框，当所有的输入框输入符合条件，提交按钮高亮可点击

5.某些场景下$nextTick代替setTimeout延时器

释义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
当然这个某些场景指的是修改数据后，DOM没有及时更新。
受js影响很深啊，老是想用setTimeout
顺便说下一下,有时候修改数组或者对象的数据，页面没有及时更新。建议使用this.$set方法，eg:this.$set(data,name,'zhangsan');

6.@import引入less文件重复渲染

算是优化的内容了
解决办法：@import (reference) ‘main.less’;
less传送门

7.安利一个三级联动,mint-ui的，下篇文章会单独讲

之前文章数据从后端获取，下次使用的是纯前端本地或cdn一段json

8.客户端的搜索

——IOS键盘的 ‘换行’ 改为 ‘搜索’

<form action="javascript:void(0);">
    <input type="search" placeholder="搜索">
  </form>

9.mint-ui的popup弹起，页面依旧可滑

监听popupVisible,当弹起的时候，让整个页面外层设置

document.getElementById('a').style.height="100%";
document.getElementById('a').style.overflow="hidden";

隐藏的时候：

document.getElementById('a').style.height="";
document.getElementById('a').style.overflow="";

10.键盘弹起时，IOS端页面多余空白

原本不可滑动的页面，键盘弹起时，页面可滑了，底部还多了很多空白，这产品可忍不了啊
解决办法：当键盘弹起（获取焦点）的时候，绑定滚动事件addEventListener(延迟1s)，该滚动事件做的是当滑动时就让对应的input触发blur()，也就是键盘隐藏
获取焦点的时候，把Index传递下来.方法很愚…

总结

不同想法，一起交流。
——不抱怨，每天更努力一点

    原文作者：蓝天海礁
    原文地址: https://segmentfault.com/a/1190000013645704
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞