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傳遞下來.方法很愚...

總結

不一樣想法，一塊兒交流。——不抱怨，天天更努力一點