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了。不清楚缘由

---

——监听来源路径及去向路径
用到两个钩子：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传递下来.方法很愚...

总结

不一样想法，一块儿交流。——不抱怨，天天更努力一点