vue開發中一些小技巧(長期更新)

整理一些平時在工做、學習中的一些開發小技巧~哪裏若是寫的不對還請糾正

路徑的引入

平時在寫vue項目時候，會建立不少組件、文件夾碰到項目比較大時候引入的路徑就會

變成很長很長~ 例如

(我不知道你們有沒這麼寫過，反正我之前是這麼幹過哈哈哈)

其實呢，像這種不少層的路徑能夠本身自定義一個路徑名來代替長路徑來使用，譬如咱們知道有個字符@，能夠替代src的路徑來使用，那麼這個@是在哪裏定義的呢？

咱們打開

build下的webpack.base.conf.js,搜索@能夠看到

看到這裏咱們知道該怎麼作了吧，咱們能夠自定義一個

自定義名: resolve(‘你的路徑’)，而後引入

注意：這個必定要重啓一下項目，否則會報錯的

this指向

（常見的window的屬性和方法有: alert,location,document,parseInt,setTimeout,setInterval等）

解決辦法一：

使用箭頭函數

箭頭函數沒有本身的this,它的this是繼承而來;默認指向在定義它時所處的對象

(宿主對象),而不是執行時的對象,定義它的時候,可能環境是window;箭頭函數能夠方便地讓咱們在setTimeout , setInterval中方便的使用this；

解決辦法二：定義變量訪問this

Vue中數組、對象更新視圖不會從新渲染

曾經有遇到過這個問題，發如今data裏聲明或者賦值過的對象與數組（數組裏是對象）的時候，向對象添加新的屬性，若是去更新這個屬性的值，是不會從新渲染的。

我用vuedevtools看了一下，值是被修改的 後來我看了一下文檔，vue 中沒法檢測到根據索引值修改的數據變更的，這種寫法數組的值不會更新視圖。

vue只監聽了數組的splice,push,unshift等方法，可使用 $set方法會更新視圖。 

 Vue.set(vm.obj, ‘e’, 0) 您還可使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：this.$set(this.obj,‘e’,02)

Vue綁定數據防止頁面閃爍

有時候咱們這麼用

加載數據的時候可能會看到 未被渲染時的狀況

可使用

還有種辦法，使用v-cloak

添加相應css

這樣就能夠防止頁面閃爍啦

組件引用使用require.context()

如頁面須要導入多個組件，這樣就寫了大量重複的代碼，且好醜

可使用require.contextrequire.context

函數接受三個參數：

• directory {String} -讀取文件的路徑
• useSubdirectories {Boolean} -是否遍歷文件的子目錄
• regExp {RegExp} -匹配文件的正則

這樣無論多少個組件都能用這個方法啦，require.context在不少場景均可以使用哦

路由傳參的幾種方式

方法1:

方法2:

方法3:

三種方法的對比： 

方法1和方法3參數是拼接在路由後面的，會暴露信息 方法2不是拼接在路由後面，可是頁面刷新後數據會丟失

方法2不是拼接在路由後面，可是頁面刷新後數據會丟失

組件緩存不從新加載

這個有什麼用呢？它能夠包裹在組件的外層、

例如這麼一個場景，如今有個tab欄，須要幾個組件都引入的，

可是每一個組件切換時就會讓這個導航欄組件從新加載，這樣比較耗費性能因此就能夠用

keep-alive包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。

注：切換時組件的activated、deactivated生命週期函數會被執行

components和Vue.component的區別:

局部註冊組件

全局註冊組件

Vue.nextTick(): 

在下次DOM更新循環結束以後執行延遲迴調。

在修改數據以後當即使用這個方法,獲取更新後的DOM

自定義鍵碼別名

鍵碼值參考：

www.jianshu.com/p/a277f9ecd…

事件修飾符

.stop: 阻止冒泡

.prevent: 阻止默認行爲

.self: 僅綁定元素自身觸發

.once :只觸發一次

.passive: 滾動事件的默認行爲(即滾動行爲)將會當即觸發,不能和.prevent一塊兒使用

使用方式：

三種Vue.$router

this.$router.push(): 跳轉到不一樣的url，但這個方法迴向history棧添加一個記錄，點擊後退會返回到上一個頁面

this.$router.replace(): 不會有記錄

this.$router.go(n): n可爲正數可爲負數。正數返回上一個頁面,相似window.history.go(n)

Img加載失敗

有時後臺返回的圖片路徑由於某些緣由加載失敗了，這時候能夠給個默認的圖片路徑

好吧  我發現用vscode截圖畫質先不說，就怎麼感受這麼醜呢

先到這了 有時間咱就慢慢更~~~~