1 對(duì)keep-alive的理解
keep-alive 是 Vue 內(nèi)置的一個(gè)組件赤兴,可以使被包含的組件保留狀態(tài)妖滔,避免重新渲染 ,其有以下特性:
1 一般結(jié)合路由和動(dòng)態(tài)組件一起使用桶良,用于緩存組件座舍;
2 提供 include 和 exclude 屬性,兩者都支持字符串或正則表達(dá)式陨帆, include 表示只有名稱匹配的組件會(huì)被緩存曲秉,exclude 表示任何名稱匹配的組件都不會(huì)被緩存 ,其中 exclude 的優(yōu)先級(jí)比 include 高疲牵;
3 對(duì)應(yīng)兩個(gè)鉤子函數(shù) activated 和 deactivated 承二,當(dāng)組件被激活時(shí),觸發(fā)鉤子函數(shù) activated纲爸,當(dāng)組件被移除時(shí)亥鸠,觸發(fā)鉤子函數(shù) deactivated。
2組件中 data 為什么是一個(gè)函數(shù)识啦?
為什么組件中的 data 必須是一個(gè)函數(shù)负蚊,然后 return 一個(gè)對(duì)象,而 new Vue 實(shí)例里颓哮,data 可以直接是一個(gè)對(duì)象家妆?
因?yàn)榻M件是用來(lái)復(fù)用的,且 JS 里對(duì)象是引用關(guān)系题翻,如果組件中 data 是一個(gè)對(duì)象揩徊,那么這樣作用域沒(méi)有隔離腰鬼,子組件中的 data 屬性值會(huì)相互影響嵌赠,如果組件中 data 選項(xiàng)是一個(gè)函數(shù),那么每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝熄赡,組件實(shí)例之間的 data 屬性值不會(huì)互相影響姜挺;而 new Vue 的實(shí)例,是不會(huì)被復(fù)用的彼硫,因此不存在引用對(duì)象的問(wèn)題炊豪。