共计 2760 个字符，预计需要花费 7 分钟才能阅读完成。
装置，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 传递下来. 办法很愚 …
总结
不同想法，一起交换。
——不埋怨，每天更致力一点
