摘要:前言如今可謂是一匹黑馬數(shù)已居第一位前端開發(fā)對于的使用已經(jīng)越來越多,它的優(yōu)點就不做介紹了本篇是我對使用過程中以及對一些社區(qū)朋友提問我的問題中做的一些總結幫助大家踩坑。隨后的重新渲染,元素組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。
前言
vue如今可謂是一匹黑馬,github star數(shù)已居第一位!前端開發(fā)對于vue的使用已經(jīng)越來越多,它的優(yōu)點就不做介紹了,
本篇是我對vue使用過程中以及對一些社區(qū)朋友提問我的問題中做的一些總結,幫助大家踩坑。如果喜歡的話可以點波贊,或者關注一下,希望本文可以幫到大家!!!
----------我是分割線
本篇介紹的問題大概如下:路由變化頁面數(shù)據(jù)不刷新問題
setTimeout/setInterval(泛指異步回掉函數(shù)的this指向)this指向改變,無法用this訪問VUe實例
setInterval路由跳轉(zhuǎn)繼續(xù)運行并沒有及時進行銷毀
vue 滾動行為用法,進入路由需要滾動到瀏覽器底部 頭部等等
實現(xiàn)vue路由攔截瀏覽器的需求,進行 一系列操作 草稿保存等等
v-once 只渲染元素和組件一次,優(yōu)化更新渲染性能
vue本地代理配置 解決跨域問題,僅限于開發(fā)環(huán)境
本地開發(fā) 沒有任何問題 部署服務器 就404啊這些問題
1. 路由變化頁面數(shù)據(jù)不刷新問題出現(xiàn)這種情況是因為依賴路由的params參數(shù)獲取寫在created生命周期里面,因為相同路由二次甚至多次加載的關系 沒有達到監(jiān)聽,退出頁面再進入另一個文章頁面并不會運行created組件生命周期,導致文章數(shù)據(jù)還是第一次進入的數(shù)據(jù)
解決方法:watch監(jiān)聽路由是否變化
watch: { // 方法1 "$route" (to, from) { //監(jiān)聽路由是否變化 if(this.$route.params.articleId){// 判斷條件1 判斷傳遞值的變化 //獲取文章數(shù)據(jù) } } //方法2 "$route"(to, from) { if (to.path == "/page") { /// 判斷條件2 監(jiān)聽路由名 監(jiān)聽你從什么路由跳轉(zhuǎn)過來的 this.message = this.$route.query.msg } } }2. 異步回調(diào)函數(shù)中使用this無法指向vue實例對象
//setTimeout/setInterval ajax Promise等等 data(){ return{ ... } }, methods (){ setTimeout(function () { //其它幾種情況相同 console.log(this);//此時this指向并不是vue實例 導致操作的一些ma"f },1000); }
解決方案 變量賦值和箭頭函數(shù)
var和let的區(qū)別
//使用變量訪問this實例 let self=this; setTimeout(function () { console.log(self);//使用self變量訪問this實例 },1000); //箭頭函數(shù)訪問this實例 因為箭頭函數(shù)本身沒有綁定this setTimeout(() => { console.log(this); }, 500);3. setInterval路由跳轉(zhuǎn)繼續(xù)運行并沒有及時進行銷毀
比如一些彈幕,走馬燈文字,這類需要定時調(diào)用的,路由跳轉(zhuǎn)之后,因為組件已經(jīng)銷毀了,但是setInterval還沒有銷毀,還在繼續(xù)后臺調(diào)用,控制臺會不斷報錯,如果運算量大的話,無法及時清除,會導致嚴重的頁面卡頓。
解決辦法:在組件生命周期beforeDestroy停止setInterval
//組件銷毀前執(zhí)行的鉤子函數(shù),跟其他生命周期鉤子函數(shù)的用法相同。 beforeDestroy(){ //我通常是把setInterval()定時器賦值給this實例,然后就可以像下面這么停止。 clearInterval(this.intervalId); },4. vue 滾動行為用法,進入路由需要滾動到瀏覽器底部 頭部等等
使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新加載頁面那樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。
路由設置如下: 詳情猛戳
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: [...] })5. 實現(xiàn)vue路由攔截瀏覽器的需求,進行一系列操作 草稿保存等等
場景:
為了防止用戶失誤點錯關閉按鈕等等,導致沒有保存已輸入的信息(關鍵信息)。
用法:
//在路由組件中:
... beforeRouteLeave (to, from, next) { if(用戶已經(jīng)輸入信息){ //出現(xiàn)彈窗提醒保存草稿,或者自動后臺為其保存 }else{ next(true);//用戶離開 } }
還有beforeEach、beforeRouteUpdate這些生命周期函數(shù) 詳情猛戳
6. v-once 只渲染元素和組件一次,優(yōu)化更新渲染性能v-once這個指令相信大家用的很少,不過個人感覺還是挺實用的!
只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。
這個就不舉例子了 直接猛戳這 v-once
這個本地代理用來解決開發(fā)環(huán)境下的跨域問題,跨域可謂老生常談的問題了,proxy 在vue中配置代理非常簡單
//比方說你要訪問 http://192.168.1.xxx:8888/backEnd/paper這個接口 //配置 config.js下面proxyTable對象 proxyTable: { "/backEnd":{ target:"http://192.168.3.200:8888", //目標接口域名有端口可以把端口也寫上 //或者prot本地起服務端口與服務端統(tǒng)一 changeOrigin:true, } }, // 發(fā)送request請求 axios.get("/backEnd/page") //按代理配置 匹配到/backEnd就代理到目標target地址 .then((res) => { console.log(res) // 數(shù)據(jù)完全拿得到 配置成功 this.newsList = res.data }, (err) => { console.log(err) }) 或者: proxyTable: { "/api":{ target:"http://192.168.3.200:8888", //目標接口域名有端口可以把端口也寫上,或者prot本地起服務端口與服端統(tǒng)一 changeOrigin:true, pathRewrite: { //該屬性重寫接口把`/api`去掉 "^/api": "" } } }, // 發(fā)送request請求 axios.get("/api/backEnd/page") //按代理配置 匹配到/backEnd就代理到目標target地址 .then((res) => { console.log(res) // 數(shù)據(jù)完全拿得到 配置成功 this.newsList = res.data }, (err) => { console.log(err) })8. 本地開發(fā) 沒有任何問題 部署服務器 就404啊這些問題
由于前端路由緣故,單頁面應用應該放到nginx或者apache、tomcat等web代理服務器中,千萬不要直接訪問index.html,同時要根據(jù)自己服務器的項目路徑更改react或vue的路由地址
注意點
1: vue-router的 history 模式 2: 服務nginx配置
到最后我想說聲抱歉,之前答應你們的node由于個人原因沒有及時更新出來,node 方面的文章篇幅一定短不了,因為要把它講清楚不是一句倆句話的事,好在我發(fā)現(xiàn)了一篇文章 對初學者晉升高級初學者有很大幫助,請點擊猛戳這里,希望你認真的看完這篇文章(書把,篇幅不短),它會對你有很大的幫助,我一定在年前給你補一遍開發(fā)完整應用的node 方向的文章!
結語這篇文章只是開始,它的待續(xù)還會很長很長,希望你我堅持下去!也希望我能幫助到更多的人,當然也會讓我真正沉淀一下,為了以后為了將來 一起努力如果大家有什么問題,或者需要補充的 歡迎留言!我會進行補全的 ! 詳細版本我稍后也會上傳到gitHub!
如果覺得文章對大家有幫助,希望大家能點贊一下或者關注一下,得到肯定的我會更加努力!~~
文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/92833.html
摘要:在這一節(jié),我們碰到的片段是一組立即運行的匿名函數(shù)。匿名函數(shù)的調(diào)用要調(diào)用一個函數(shù),我們必須要有方法定位它,引用它。那么很顯然,沒有任何實現(xiàn)的匿名函數(shù)不可能應用了閉包特性。 代碼如下: (function(){ //這里忽略jQuery所有實現(xiàn) })(); (function(){ //這里忽略jQuery所有實現(xiàn) })(); 半年前初次接觸jQuery的時候,我也像其他人一樣很興...
摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線為主,對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰,官方示例也很豐富,中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線...
摘要:折線圖小技巧折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線為主,對大家完成一些曲線和的展示及交互有所幫助基本使用文檔寫得非常詳細清晰,官方示例也很豐富,中還有很多功能更強大的示例篇的是很 echarts 折線圖小技巧 echarts 折線圖功能豐富且官方文檔詳細易懂,上手比較容易,這篇文章將分享一些項目中踩過的坑,示例主要以多條曲線...
摘要:我的書簽我的書簽謹慎導入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節(jié)常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優(yōu)雅一勞永 我的書簽 我的書簽(謹慎導入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
閱讀 2643·2021-11-23 09:51
閱讀 904·2021-09-24 10:37
閱讀 3627·2021-09-02 15:15
閱讀 1971·2019-08-30 13:03
閱讀 1892·2019-08-29 15:41
閱讀 2637·2019-08-29 14:12
閱讀 1436·2019-08-29 11:19
閱讀 3312·2019-08-26 13:39