Vue使用中遇到問題彙總（三）

一、後臺session過時前端跳轉到登陸頁面

　　axios 攔截器 能夠攔截請求和返回，對於失效的狀況後端能夠返回一個狀態碼，如401， 使用axios攔截時判斷是401，則跳轉到指定頁面，如login。本人項目中開發還沒定接口規範，後端返回的就是success：true/false

axios.interceptors.response.use((response) => { if (response.data.success === false) { router.push('/login') message({ message:'會話失效，請從新登錄', type:'error' }) return response } else { return response } }, (error) => { return Promise.reject(error) })

二、定義全局函數或變量

　　許多時候咱們須要定義一些全局函數或變量，來處理一些頻繁的操做（這裏拿 AJAX 的異常處理舉例說明）。可是在 Vue 中，每個單文件組件都有一個獨立的上下文（this）。一般在異常處理中，須要在視圖上有所體現，這個時候咱們就須要訪問 this 對象，可是全局函數的上下文一般是 window，這時候就須要一些特殊處理了。

　　簡單粗暴型：

　　最簡單的方法就是直接在 window 對象上定義一個全局方法，在組件內使用的時候用 bind、call 或 apply 來改變上下文。

　　定義一個全局異常處理方法：

// errHandler.js
window.errHandler = function () { // 不能使用箭頭函數
  if (err.code && err.code !== 200) { this.$store.commit('err', true) } else { // ...
 } } //在入口文件中導入： // src/main.js
import 'errHandler.js'

//在組件中使用： // xxx.vue
export default { created () { this.errHandler = window.errHandler.bind(this)//綁定this
 }, method: { getXXX () { this.$http.get('xxx/xx').then(({ body: result }) => { if (result.code === 200) { // ...
        } else { this.errHandler(result) } }).catch(this.errHandler) } } }

　　優雅安全型作法：

　　在大型多人協做的項目中，污染 window 對象仍是不太穩當的。特別是一些比較有我的特點的全局方法（可能在你寫的組件中幾乎到處用到，可是對於其餘人來講可能並不須要）。這時候推薦寫一個模塊，更優雅安全，也比較天然，惟一不足之處就是每一個須要使用該函數或方法的組件都須要進行導入。好比我常常把一些公共的方法寫在utils裏面，若是哪一個組件須要就直接導入方法使用便可，推薦這種方式，前面介紹只是一個思路引子而已。

三、setInterval路由跳轉繼續運行並無及時進行銷燬

　　好比一些彈幕，走馬燈文字，這類須要定時調用的，路由跳轉以後，由於組件已經銷燬了，可是setInterval尚未銷燬，還在繼續後臺調用，控制檯會不斷報錯，若是運算量大的話，沒法及時清除，會致使嚴重的頁面卡頓。

　　解決方案：在組件生命週期beforeDestroy中止setInterval

beforeDestory() { clearInterval(this.timer); MessageBox.close() }

四、圖片驗證碼，視頻等資源，瀏覽器自動解析

<el-dialog class="dialogStyle" center top="0" custom-class="vertical-horizontal" title="查看錄像" :visible.sync="videoShow" width="70%">
    <video controls>
        <source :src="videoApi" type="video/mp4">
    </video>
</el-dialog>

//查看錄像
viewVideo(row){ this.videoShow = true
    this.videoApi = "/api/up/playVideo?video_path=" + row.video_path //videoApi 直接給接口，及傳參便可 
}

五、ES6 import 引用問題

　　在 ES6 中，模塊系統的導入與導出採用的是引用導出與導入（非簡單數據類型），也就是說，若是在一個模塊中定義了一個對象並導出，在其餘模塊中導入使用時，導入的實際上是一個變量引用（指針），若是修改了對象中的屬性，會影響到其餘模塊的使用。

　　一般狀況下，系統體量不大時，咱們可使用 JSON.parse(JSON.stringify(str)) 簡單粗暴地來生成一個全新的深度拷貝的 數據對象。不過當組件較多、數據對象複用程度較高時，很明顯會產生性能問題，這時咱們能夠考慮使用 Immutable.js。

　　鑑於這個緣由，進行復雜數據類型的導出時，須要注意多個組件導入同一個數據對象時修改數據後可能產生的問題。

　　此外，模塊定義變量或函數時即使使用 let 而不是 const，在導入使用時都會變成只讀，不能從新賦值，效果等同於用 const 聲明。

六、圖片上傳與預覽

　　問題描述： 有時候可能會有這樣的需求，須要經過<input type="file">標籤上傳一個頭像，而後在特定的位置預覽頭像。

　　解決方法： 預覽 （1）添加一個<img :src="image">標籤，圖片路徑綁定實例數據 （2）給<input type="file">添加一個事件@change="onFileChange"，（3）onFileChange方法以下：

onFileChange: function(){ if (typeof FileReader == 'undefined') { console.log('failed'); return false; } var file = document.getElementById('file').files[0]; var reader = new FileReader(); reader.readAsDataURL(file); var vm = this; reader.onload = function(e) { vm.image = e.target.result; } }

七、vue 滾動行爲用法，進入路由須要滾動到瀏覽器底部、頭部等等

　　使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像從新加載頁面那樣。 vue-router 能作到，並且更好，它讓你能夠自定義路由切換時頁面如何滾動。 注意：這個功能只在

const router = new VueRouter({ 　　mode: 'history', 　　scrollBehavior (to, from, savedPosition) { 　　　　if (savedPosition) { //若是savedPosition存在，滾動條會自動跳到記錄的值的地方
　　　　　　return savedPosition 　　　　} else{ 　　　　　　return { x: 0, y: 0}//savedPosition也是一個記錄x軸和y軸位置的對象
　　　　} 　　}， 　　routes: [...] })

八、實現vue路由攔截瀏覽器的需求，進行一系列操做，如草稿保存等等

　　爲了防止用戶失誤點錯關閉按鈕等等，致使沒有保存已輸入的信息(關鍵信息)。

　　解決方法：在beforeRouteLeave鉤子中執行相應操做

beforeRouteLeave (to, from, next) { 　　if(用戶已經輸入信息){ //出現彈窗提醒保存草稿，或者自動後臺爲其保存
　　}else{ next(true);//用戶離開
　　} }

九、v-once 只渲染元素和組件一次，優化更新渲染性能

　　v-once 這個指令相信你們用的不多，不過我的感受仍是挺實用的！

　　只渲染元素和組件一次。隨後的從新渲染，元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

十、關於在vue中如何操做DOM元素。

　　咱們都知道vue框架中咱們通常操做的都是數據，那麼假如咱們要操做dom元素使用什麼方法呢？下面就來介紹一下！

　　假若有如下元素，咱們要獲取這個h2元素的文本，須要給此元素添加ref屬性，並賦予名字。

<h2 ref='foo'>我是ref的值</h2>

　　接下來就可使用這個方法獲取到它的文本（注意是this.$refs不是this.$ref）：

console.log(this.$refs.foo.innerHTML)

//如何改變h2中的文本呢？
this.$refs.foo.innerHTML='我是新值'

　　這樣就能夠和之前同樣，輕鬆的操做dom元素了，可是vue仍是以操做數據爲核心，因此建議儘可能少的使用以上方法。

十一、element的tooltip修改默認樣式問題

　　經過使用tooltip的popper-class屬性設置自定義class，可是發如今本組件給class設置樣式會無效，最後發現tooltip生成的元素是在最外層，因此只能把class設置的樣式移到App.vue，樣式生效了

.el-tooltip__popper.is-light.tooltipStyle{ border 1px solid #eee width 80px word-break break-all }