乐趣区

关于javascript: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

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 传递下来. 办法很愚 …
总结

不同想法,一起交换。
——不埋怨,每天更致力一点

退出移动版