vue專案技術小記
最近做的專案快要結尾了,本專案用前後端分離的,然後前端是用vue開發的,為什麼選vue呢?一來公司要求效率要高些的,那就應該用到三大流行的框架之一,然後專案的內容不太複雜的,覺得用vue更合適的。二來正好應該要“炒熟”vue了哈。其中陷入了不少坑,一個一個爬過來的,總結下入坑的原因,另外會給出官方文件的對應內容,以便加深理解的。如有不足之處,請提出來哈~
-
非同步載入元件
const Index=()=>import('@/page/Index');const Home=()=>import('@/page/Home');const router=new Router({ routes:[ { path:'/index', component:Index }, { path:'/home', component:Home } ] })
然後你會發現js被分開的,這就是所謂的非同步載入~
參考官方文件
我們都知道vue一般都是單頁面的,也就意味著一開始就要載入全部的元件,這太不友好的,載入時間會慢些。這時候我們就用到非同步元件~
-
頁面後退時,保持之前的狀態,不重新整理
const router = new Router({ routes: [ { path: '/index', components:Index, meta:{ keepAlive:false } }, { path:'/goods', component:Goods, meta:{ keepAlive:true } }, }
用meta中的keepAlive來判斷需不需要快取,keep-alive就是儲存快取的元件。
參考官方文件
在router.js中
在app.vue檔案中
-
在相同路由的情況下,再次點選導航欄上的本路由,再次重新整理
在vue中,路由地址相同的情況下,是不會再次重新整理的,即使點選本路由的導航文字上。一開始我沒想到解決的方案,後來尋求大佬商量,大佬說可以用事件傳遞的。然後他告訴我一句話的,
vue.js一定不會阻礙傳統方法實現的。
這話說得我慚愧,我意識到我太依賴vue.js的框架,沒擴充思維的。再次感謝大佬的點拔~
//datadata(){ return { isFresh:false, } }//事件函式tempbtn(){ this.isFresh=false; } watch:{ isFresh(){ //console.log('ShopisFresh:'+this.isFresh); if(this.isFresh){ Object.assign(this.$data,this.$options.data()); this.fetchData(); } } },//然後載入完後,還要繫結事件,傳遞到主路由的tempbtn事件this.$emit('tempbtn');
嗯,在子路由上監聽到isFresh為true,表示要重新整理的,Object.assign是利用data的初始化資料覆蓋,然後重新載入資料。
Index.vue
對,是可以用事件傳遞來實現的。在主路由上繫結isFresh,判斷需不需要重新整理子路由,然後在子路由上繫結事件,傳遞到主路由的事件。主路由監聽到事件的,就把isFresh變為false,以防下面還會需要到。不設定為false,下面的就不會重新整理。看程式碼如下:
App.vue
-
checkbox整體點選
師要求能點選checkbox的整體,包括checkbox後面的文字,不是隻能點選checkbox的框,這可把我為難了,然後艱難的爬出坑了。
data(){ return { tempChecked:null } }, props:['checked'], watch:{ checked(){ this.tmpChecked=this.checked } }, computed: { selfChecked: { get: function(val){ return this.tmpChecked; }, set: function(newVal){ this.tmpChecked = newVal this.$emit('input', newVal) } } },然後在父元件上用v-model即可。用selfChecked來判斷是不是要點選,至於為什麼要watch,是判斷checked為真還是假,比如說在父元件上,提交後,表單要清空的,這時候要監聽到checked為假的,然後傳遞到selfChecked的值。這樣就能清空checkbox。
參考思路
-
setInterval的問題
用了setInterval之後,切換路由的時候發現還在計時,不得了,真的會影響效能唉,就嚇的趕緊啃官方文件,找到了~
beforeDestroy(){ clearInterval(this.interId); }
beforeDestroy是毀路由之前的函式,就是說毀路由之前就清除setInterval
參考vue的生命週期
-
在v-for迴圈中進行v-model資料繫結
下面說說和vue沒關係的問題
-
上線時去掉console
我們一般都會用console來列印,以便檢查的,萬一console寫多了,上線時總不能列印出console吧,要註釋掉,但太費時間吧,這時候webpack神器上場(本人用webpack3)
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: true } }, sourceMap: config.build.productionSourceMap, parallel: true}),
這prod是生產環境的,然後drop_console為true,是去掉console
在webpack.prod.config.js中
-
相容ie的問題
部署到生產環境後,測試ie11時發現空白屏的,我慌了,不是說可以相容到ie9嗎?還是說沒配置好的,然後google查,ie還沒支援js新的api,比如promise,所以需要babel-polyfill來轉換的。真是蛋疼的ie,還能怎麼辦呢?當然是加babel-polyfill外掛的。
npm install babel-polyfill --save//然後在webpack.base.config.js中引用這外掛module.exports=require('babel-polyfill');module.export={ ... entry:{ app:['babel-polyfill','./src/main.js'] } }
正在更新中...
作者:Empty莫曉邪
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4560/viewspace-2804661/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Vue SPA專案優化小記Vue優化
- vue3專案技術清單集合Vue
- 技術轉向專案管理的心得筆記專案管理筆記
- React專案技術棧React
- 使用node爬蟲做了一個vue小專案記錄使用筆記爬蟲Vue筆記
- vue vue-element-admin專案踩坑小結Vue
- 小程式專案之填坑小記
- vue技術部落格瀏覽筆記Vue筆記
- 記一次前端技術選型和專案優化前端優化
- 社交專案中用到的技術
- Flutter OnePass 專案技術方案分享Flutter
- 小程式視訊專案筆記筆記
- vue小記Vue
- 前端技術演進(六):前端專案與技術實踐前端
- 【北京】【小川科技】招聘 Golang 技術專家Golang
- IOS技術分享| anyLive 開源專案iOS
- vue小程式專案 pdf下載解決方案Vue
- FE-c(前端技術社群)專案開發筆記(非redux版)前端筆記Redux
- VUE專案Vue
- 記錄--微前端qiankun接入vue2&vue3專案前端Vue
- [日常] SinaMail專案和技術能力總結AI
- 微服務專案搭建之技術選型微服務
- 技術積累——C++ 呼叫 python 專案C++Python
- 技術專案文件書寫規範指南
- IOS技術分享| ARCallPlus 開源專案(二)iOS
- 專案中怎樣做技術選型
- IOS技術分享| ARCallPlus 開源專案(一)iOS
- 讓Vue專案更絲滑的幾個小技巧Vue
- vue3實現一個抽獎小專案Vue
- CSS 小結筆記之滑動門技術CSS筆記
- Vue2.5筆記:如何在專案中使用和配置VueVue筆記
- Nginx部署Vue前端專案,部署多個Vue專案NginxVue前端
- Vue 3 技術揭秘Vue
- SpringBoot+vue 前後端的分離專案筆記 [一] 專案搭建Spring BootVue後端筆記
- [外包專案]尋求技術大佬開發一個圖片處理的小程式
- XSKY星辰天合專利小檔案歸併技術提升儲存效率和效能
- vue專案配置Vue
- vue專案流程Vue