国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 實踐過程中的幾個問題

DevTalking / 2837人閱讀

摘要：前言本篇是我在使用過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。小結(jié)上面就是我分享的幾個小問題，希望大家看了能夠有所收獲另明年準(zhǔn)備去上海，如果小伙伴的公司有坑，可以聯(lián)系一下我。

前言

本篇是我在使用vue過程中，遇到的幾個小問題和之前不了解的東西，記錄下來，希望能夠幫助各位踩坑。如果喜歡的話可以點波贊，或者關(guān)注一下，希望本文可以幫到大家。

本文首發(fā)于我的個人blog：obkoro1.com
本篇記錄個人遇到的問題如下:

路由變化頁面數(shù)據(jù)不刷新問題

setTimeout/setInterval this指向改變，無法用this訪問VUe實例

setInterval路由跳轉(zhuǎn)繼續(xù)運(yùn)行并沒有銷毀

vue 滾動行為(瀏覽器回退記憶位置)用法

vue路由攔截瀏覽器后退實現(xiàn)草稿保存類似需求

v-once 只渲染元素和組件一次，優(yōu)化更新渲染性能

vue框架風(fēng)格指南推薦

路由變化頁面數(shù)據(jù)不刷新問題 
場景：比如文章詳情數(shù)據(jù)，依賴路由的params參數(shù)獲取的(ajax寫在created生命周期里面)，因為路由懶加載的關(guān)系，退出頁面再進(jìn)入另一個文章頁面并不會運(yùn)行created組件生命周期，導(dǎo)致文章數(shù)據(jù)還是上一個文章的數(shù)據(jù)。
解決方法：watch監(jiān)聽路由是否變化 
 watch: {
  "$route" (to, from) { //監(jiān)聽路由是否變化
    if(this.$route.params.articleId){//是否有文章id
      //獲取文章數(shù)據(jù)
    }
  }
}
setTimeout/setInterval this指向改變，無法用this訪問VUe實例 場景： 
  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此時this指向Window對象
        },1000);
    }
解決方法：使用箭頭函數(shù)或者 
    //箭頭函數(shù)訪問this實例 因為箭頭函數(shù)本身沒有綁定this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用變量訪問this實例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self變量訪問this實例
        },1000);
setInterval路由跳轉(zhuǎn)繼續(xù)運(yùn)行并沒有銷毀 場景：

比如一些彈幕，走馬燈文字，這類需要定時調(diào)用的，路由跳轉(zhuǎn)之后，因為組件已經(jīng)銷毀了，但是setInterval還沒有銷毀，還在繼續(xù)后臺調(diào)用，控制臺會不斷報錯，如果運(yùn)算量大的話，無法及時清除，會導(dǎo)致嚴(yán)重的頁面卡頓。

解決辦法：在組件生命周期beforeDestroy停止setInterval

組件銷毀前執(zhí)行的鉤子函數(shù)，跟其他生命周期鉤子函數(shù)的用法相同。

beforeDestroy(){
     //我通常是把setInterval()定時器賦值給this實例，然后就可以像下面這么暫停。
    clearInterval(this.intervalid);
},
vue 滾動行為(瀏覽器回退記憶位置)用法

這個我當(dāng)時做的時候以為很難，后來做好了才發(fā)現(xiàn)就是一個設(shè)置而已（前提是要開啟路由的History 模式），下面做一個簡單的分享。

路由設(shè)置

要使用這一功能，首先需要開啟vue-router的 history模式

如果之前一直使用的是hash 模式(默認(rèn)模式)，項目已經(jīng)開發(fā)了一段時間，然后轉(zhuǎn)history模式很可能會遇到：這些問題

滾動行為具體設(shè)置如下：

const router = new VueRouter({
mode: "history",
scrollBehavior (to, from, savedPosition) {
//savedPosition

if (savedPosition) { //如果savedPosition存在，滾動條會自動跳到記錄的值的地方
  return savedPosition
} else {
  return { x: 0, y: 0 }//savedPosition也是一個記錄x軸和y軸位置的對象
 }
}，

routes: [...]
})

vue滾動行為文檔，可以進(jìn)到這里看看更詳細(xì)的信息。

vue路由攔截瀏覽器后退實現(xiàn)草稿保存類似需求 場景：

為了防止用戶突然離開，沒有保存已輸入的信息。

用法： 
//在路由組件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用戶已經(jīng)輸入信息){
    //出現(xiàn)彈窗提醒保存草稿，或者自動后臺為其保存
    
  }else{
    next(true);//用戶離開
  }

類似的還有beforeEach、beforeRouteUpdate，也分為全局鉤子和組件鉤子，見路由文檔。

v-once 只渲染元素和組件一次，優(yōu)化更新渲染性能

覺得v-once這個api蠻6的，應(yīng)該很多小伙伴都沒有注意到這個api。

文檔介紹：

這個api在我看來主要用于那些一次性渲染，并且不會再有操作更改這些渲染的值，這樣就可以優(yōu)化雙向綁定的更新性能。

文檔推薦：對低開銷的靜態(tài)組件使用 v-once

盡管在 Vue 中渲染 HTML 很快，不過當(dāng)組件中包含大量靜態(tài)內(nèi)容時，可以考慮使用 v-once 將渲染結(jié)果緩存起來，就像這樣：

Vue.component("terms-of-service", {
  template: "
    

      
Terms of Service

      ...很多靜態(tài)內(nèi)容...
    

  "
})
vue風(fēng)格指南推薦：

寫到這里想到vue框架還有一個風(fēng)格指南推薦，如下圖所示，大家也可以學(xué)習(xí)一波。

小結(jié)

上面就是我分享的幾個小問題，希望大家看了能夠有所收獲！另：明年準(zhǔn)備去上海，如果小伙伴的公司有坑，可以聯(lián)系一下我。

最后：如需轉(zhuǎn)載，請放上原文鏈接并署名。碼字不易，感謝支持！本人寫文章本著交流記錄的心態(tài)，寫的不好之處，不撕逼，但是歡迎指點。然后就是希望看完的朋友點個喜歡，也可以關(guān)注一下我。
個人blog and 掘金個人主頁

以上2018.1.17

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92784.html

相關(guān)文章

  • Vue項目數(shù)據(jù)動態(tài)過濾實踐

    摘要：因此在這個項目做完等待測試的時候我思考了一下，誰說過濾器就一定放在里面。 這個問題是在下在做一個Vue項目中遇到的實際場景，這里記錄一下我遇到問題之后的思考和最后怎么解決的(老年程序員記性不好 -。-)，過程中會涉及到一些Vue源碼的概念比如$mount、render watcher等，如果不太了解的話可以瞅瞅 Vue源碼閱讀系列文章 ~ 問題是這樣的：頁面從后臺拿到的數(shù)據(jù)是由0、1之...

    codergarden 評論0 收藏0

  • Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

    摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

    Profeel 評論0 收藏0

  • Vue.js 實踐（2）：實現(xiàn)多條件篩選、搜索、排序及分頁的表格功能

    摘要：基礎(chǔ)布局的中主要為部分，分別是用于搜索篩選和分頁的表單控件用于排序表格的表頭以及用于展示數(shù)據(jù)的。這也是前瞻發(fā)布之后，提出廢棄部分功能后許多人反應(yīng)較為強(qiáng)烈的原因。 與上周的第一篇實踐教程一樣，在這篇文章中，我將繼續(xù)從一種常見的功能——表格入手，展示Vue.js中的一些優(yōu)雅特性。同時也將對filter功能與computed屬性進(jìn)行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部...

    ChanceWong 評論0 收藏0

  • 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓

    摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁響應(yīng)速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓了么PWA 升級實踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請與InfoQ中文站聯(lián)系。從屬于筆...

    liuchengxu 評論0 收藏0

發(fā)表評論

0條評論

DevTalking

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<