装置，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
http://www.developcls.com
http://www.developcls.com/qa/3eaea6f7e1c04a489072879d93c590f9…
官网也有阐明
是尽量，不是肯定。性能和代码不便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传递下来.办法很愚…
总结
不同想法，一起交换。
——不埋怨，每天更致力一点
发表回复