vue使用小结

安装,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了。不清楚原因


——监听来源路径及去向路径
用到两个钩子:beforeRouteEnterfrom.pathbeforeRouteLeaveto.path
场景:产品需求:下单时如果点击返回就popup提示,提示用户再想想,还是确定离开。此时beforeRouteLeave判断只要to.path不是下行页面就阻断,参数next(false)即可阻断。
——有个问题就是,IOS的侧滑会有延迟,当在下单页面侧滑返回的时候,会先返回上个页面,延迟一会之后再回来。目前没发现可行办法(移动端touch事件禁用过,与侧滑是两码事,不在一个层级)。
——京东、天猫的是,下单及下行页面,禁用侧滑,其他页面正常使用(毕竟我们不是app,禁用不了)
——当然,这些都是为了用户体验。如果有合适办法,可讨论。
——监听来源:刚刚说了beforeRouteEnterfrom.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键盘的 ‘换行’ 改为 ‘搜索’

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传递下来.方法很愚...

总结

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

你可能感兴趣的:(vue.js,html5)