vue專案細節優化筆記
1、vue-awesome-swiper輪播圖片在3G網路載入時，下面內容出現頁面抖動
解決辦法： 外層div新增class為wrapper
.wrapper{
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 32.5%;//其中32.5%為圖片的寬高比
}
//或者方案2（部分瀏覽器不相容）
.wrapper{
width: 100%;
height: 32.5vw; //其中vw相當於視口寬度的百分比
}
2、scoped樣式限制的元件對其他元件樣式修改
解決辦法： 使用’>>>'對樣式進行穿透
<style scoped>
/*當前元件對swiper元件的樣式進行修改*/
/*即對.wrapper 下的.swiper-pagination-bullet-active樣式進行修改*/
.wrapper >>> .swiper-pagination-bullet-active{
bancground: red !important;
}
</style>
3、當flex:1佈局中子元素使用超出出現省略號時，發現文件超出頁面且未出現省略號
解決方案： 需要在flex:1的當前樣式中新增min-width:0;
.flex{ flex: 1; min-width:0; //解決超出不出現省略問題 } .flex .flex-child{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
4、開發環境請求伺服器資料的自動切換至本地mock資料
說明：vue-cli建立的專案只有static資料夾下的檔案才可以被外部訪問，故mock的資料是放在static資料夾下 請求如下：
當前元件
<script> import axios from 'axios'; export default { mounted () { axios.get('/api/index.json').then((res) => { //其中index.json本地mock和服務端的資料檔案 //請求成功的返回函式 console.log(res) }) } } </script>
config資料夾下index.js配置檔案
//假設本地static/mock資料夾下有index.json檔案
dev: {
porxyTable: {
'/api': {
target: 'http://localhost:8080', //伺服器地址
pathRewrite: {
'^/pai': '/static/mock' //本地靜態mock檔案地址
}
}
}
}
切記：修改配置檔案需重啟服務
5、頁面滾動流暢切有彈性better scroll外掛的使用
頁面
<template>
<!--頁面結構-->
<div class="list" ref="wrapper">
<!--此處設定wrapper供js訪問當前dom-->
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
</ul>
</div>
</template>
<script>
//better-scroll需提前安裝，其實isScroll的封裝
import Bscroll form 'better-scroll';
export default {
mounted: () {
this.scroll = new Bscroll(this.$refs.wrapper);
}
}
</script>
<style scoped>
/*此處樣式必須，取代原生滾動*/
.list{
overflow: hidden;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>
better-scroll 是一款重點解決移動端（已支援 PC）各種滾動場景需求的外掛。它的核心是借鑑的 iscroll 的實現，它的 API 設計基本相容 iscroll，在 iscroll 的基礎上又擴充套件了一些 feature 以及做了一些效能優化。 傳送門
6、對touch重複執行的效能優化
說明：當touchmove事件或者滾動事件一直在執行，並且立即執行某些方法時非常消耗效能。優化原理是通過setTimeout延遲一定時間再執行，以減少執行次數，時間可設定16ms
<script>
//handleTouchmove為繫結的touchmove事件
data() {
return {
timer:null
}
},
methods: {
handleTouchmove (e) {
//對請求進行節流
if(this.timer){
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
//需要執行的方法
},16)
//其中16為延時16毫秒執行，16毫秒不會帶來視覺的卡頓
}
}
</script>
7、使用keep-alive在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM。
例如快取路由請求的資料
<keep-alive>
<router-view></router-view>
</keep-alive>
其中有兩個引數
include: 字串或正則表示式。只有匹配的元件會被快取。 exclude: 字串或正則表示式。任何匹配的元件都不會被快取。
注意：當使用keep-alive時會多出生命週期鉤子activated、deactivated。使用會將資料保留在記憶體中，如果要在每次進入頁面的時候獲取最新的資料，需要在activated階段獲取資料，承擔原來created鉤子中獲取資料的任務。也就是說加上keep-alive再次訪問頁面時不會觸發mounted但是會觸發activated鉤子函式
例如
<script>
export default {
data () {
lastCity: ''
},
mounted () {
this.lastCity = this.city;
},
activated () {
//當發現新的引數與上次訪問該頁面不同時則重新請求
if (this.lastCity !== this.city) {
//重新請求資料
//並且改變上次的引數值以供下次參考
this.lastCity = this.city
}
}
}
</script>
8、全域性物件的重複呼叫問題解決
**問題重現：**當元件中對window監聽事件時，當前元件能觸發事件，離開當前頁面也還會觸發該window事件 例如：
<script>
export default {
data () {
return {}
},
methods: {
handleScroll () {
//執行事件
const srollTop = document.documentElement.scrollTop
console.log(srollTop)
}
},
activated () {
//頁面展示時呼叫
window.addEventListener('scroll', this.handleScroll)
},
deactivated () {
//頁面消失是呼叫
//此處可移除window事件繫結以防止其他元件呼叫
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
此處通過keep-alive的另一個生命鉤子deactivated函式解除對window事件的監聽，從而解決被其他元件呼叫的問題
9、一個元件滾動到某位置，其子元件也跟隨滾動到某位置的問題解決
解決辦法： 在main.js中建立router時使用scrollBehavior方法，程式碼如下
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index'
const router = new VueRouter({
router,
mode: routerMode, //路由的模式
scrollBehavior (to, from, savedPosition) {
//回到最頂部
return { x: 0, y: 0}
}
})
同樣可以根據此方法實現在後退時回到之前的滾動的位置的
程式碼如下：
//savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時才可用
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
同樣也可以用此方法滾動到錨點位置
程式碼如下：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
scrollBehavior具體用法傳送門