總結(jié) Vue 知識體系之 12 個實(shí)用技巧

監(jiān)聽組件的生命周期

比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽到子組件掛載 mounted 就做一些邏輯處理，常規(guī)的寫法可能如下：

?//?Parent.vue
"doSomething"/>

//?Child.vue
mounted()?{
??this.$emit("mounted");
}

此外，還有一種特別簡單的方式，子組件不需要任何處理，只需要在父組件引用的時候通過@hook 來監(jiān)聽即可，代碼如下：

"doSomething"?/>?<Child?@hook:updated="doSomething"?/>

當(dāng)然這里不僅僅是可以監(jiān)聽 mounted，其它的生命周期事件，例如：created，updated 等都可以。

watch 的初始立即執(zhí)行

觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動。類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進(jìn)行后續(xù)操作。

但是當(dāng) watch 一個變量的時候，初始化時并不會執(zhí)行，如下面的例子，你需要在 created 的時候手動調(diào)用一次。

created()?{
??this.getList();
},
watch:?{
??keyWord:?'getList',
}

上面這樣的做法可以使用，但很麻煩，我們可以添加 immediate 屬性，這樣初始化的時候就會自動觸發(fā)(不用再寫 created 去調(diào)用了)，然后上面的代碼就能簡化為：

watch:?{
??keyWord:?{
????handler:?'getList',
????immediate:?true
??}
}

watch 有三個參數(shù)

• handler：其值是一個回調(diào)函數(shù)。即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)
• deep：其值是 true 或 false；確認(rèn)是否深入監(jiān)聽。
• immediate：其值是 true 或 false，確認(rèn)是否以當(dāng)前的初始值執(zhí)行 handler 的函數(shù)

路由參數(shù)變化組件不更新

同一path的頁面跳轉(zhuǎn)時路由參數(shù)變化，但是組件沒有對應(yīng)的更新。

原因：主要是因?yàn)楂@取參數(shù)寫在了created或者mounted路由鉤子函數(shù)中，路由參數(shù)變化的時候，這個生命周期不會重新執(zhí)行。

解決方案 1：watch監(jiān)聽路由

watch:?{
?//?方法1?//監(jiān)聽路由是否變化
??'$route'?(to,?from)?{
???if(to.query.id?!==?from.query.id){
???this.id?=?to.query.id;
???this.init();//重新加載數(shù)據(jù)
??}
??}
}
//方法?2??設(shè)置路徑變化時的處理函數(shù)
watch:?{
'$route':?{
????handler:?'init',
????immediate:?true
??}
}

解決方案 2 ：為了實(shí)現(xiàn)這樣的效果可以給router-view添加一個不同的key，這樣即使是公用組件，只要 url 變化了，就一定會重新創(chuàng)建這個組件。

"$route.fullpath"></router-view>

路由懶加載

Vue 項(xiàng)目中實(shí)現(xiàn)路由按需加載（路由懶加載）的 3 中方式：

//?1、Vue異步組件技術(shù)：
?{
??path:?'/home',
??name:?'Home',
??component:?resolve?=>?reqire(['path路徑'],?resolve)
??}

//?2、es6提案的import()
??const?Home?=?()?=>?import('path路徑')

//?3、webpack提供的require.ensure()
?{
??path:?'/home',
??name:?'Home',
??component:?r?=>?require.ensure([],()?=>??r(require('path路徑')),?'demo')
?}

require.context()

require.context(directory,useSubdirectories,regExp)

• directory：說明需要檢索的目錄
• useSubdirectories：是否檢索子目錄
• regExp: 匹配文件的正則表達(dá)式,一般是文件名

場景:如頁面需要導(dǎo)入多個組件,原始寫法:

import?titleCom?from?'@/components/home/titleCom'
import?bannerCom?from?'@/components/home/bannerCom'
import?cellCom?from?'@/components/home/cellCom'
components:?{
??titleCom,?bannerCom,?cellCom
}

這樣就寫了大量重復(fù)的代碼,利用 require.context 可以寫成

const?path?=?require('path')
const?files?=?require.context('@/components/home',?false,?/\.vue$/)
const?modules?=?{}
files.keys().forEach((key)?=>?{
??const?name?=?path.basename(key,?'.vue')
??modules[name]?=?files(key).default?||?files(key)
})
components:?modules

遞歸組件

• 遞歸組件: 組件在它的模板內(nèi)可以遞歸的調(diào)用自己，只要給組件設(shè)置 name 組件就可以了。
• 不過需要注意的是，必須給一個條件來限制數(shù)量，否則會拋出錯誤: max stack size exceeded
• 組件遞歸用來開發(fā)一些具體有未知層級關(guān)系的獨(dú)立組件。比如：聯(lián)級選擇器和樹形控件