使用Vue進(jìn)行開發(fā)時(shí)，隨著項(xiàng)目的復(fù)雜化，組件個(gè)數(shù)也逐漸增加，此時(shí)我們就面臨著一個(gè)問題——多組件狀態(tài)共享。也許有人說這不是啥問題，Vuex就可以解決啊。是的，Vuex可以解決多組件狀態(tài)共享的問題，但是如果此時(shí)我們的項(xiàng)目沒有那么大那么復(fù)雜，還要使用Vuex來解決這個(gè)問題嗎？答案是否定的，因?yàn)檫@會(huì)導(dǎo)致代碼繁瑣冗余。那該怎么辦？其實(shí)我們還可以通過vue.js2.6版本新增的Observable API來解決這個(gè)問題。示例1：Observable實(shí)現(xiàn)多組件狀態(tài)共享a) 創(chuàng)建一個(gè) store.js，包含一個(gè)store和一個(gè)mutations，分別用來指向數(shù)據(jù)和處理方法。b) 在 App.vue里面引入這個(gè) store.js，使用引入的數(shù)據(jù)和方法。
Vue會(huì)通過劫持我們的數(shù)據(jù)，進(jìn)而實(shí)現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化。但有時(shí)候我們的數(shù)據(jù)不需要發(fā)生變化，只是純粹的數(shù)據(jù)展示，此時(shí)Vue再進(jìn)行數(shù)據(jù)劫持會(huì)大大增加組件初始化時(shí)間。此時(shí)我們可以使用object.freeze方法來阻止vue劫持?jǐn)?shù)據(jù)，進(jìn)而減少組件初始化時(shí)間。示例2：object.freeze方法凍結(jié)users值注意：object.freeze方法凍結(jié)的只是users的值，其引用并未被凍結(jié)。所謂的作用域插槽，就是父組件在調(diào)用子組件時(shí)給子組件傳輸一個(gè)插槽，且該插槽必須放在template標(biāo)簽里邊，同時(shí)聲明從子組件接收的數(shù)據(jù)放在一個(gè)自定義屬性內(nèi)，并定義該數(shù)據(jù)的渲染方式。比如項(xiàng)目中有一個(gè)A組件只負(fù)責(zé)布局不管數(shù)據(jù)邏輯，另一個(gè)B組件負(fù)責(zé)數(shù)據(jù)處理，A組件需要數(shù)據(jù)的時(shí)候就去B組件中取。那當(dāng)開發(fā)過程中我們的布局發(fā)生變化時(shí)，我們只需要修改A組件即可，而不需要修改B組件，這樣就能充分復(fù)用B組件的數(shù)據(jù)邏輯處理。那了解了作用域插槽的用處，接下來我們通過一個(gè)簡(jiǎn)單的小例子給大家講解作用域插槽的使用方式。示例3：使用slot、slot-scope實(shí)現(xiàn)作用域插槽a) 創(chuàng)建一個(gè)user.vue組件，將user數(shù)據(jù)綁定在<slot>元素上
b) 在父組件中引用 user組件，展示user數(shù)據(jù)的firstName數(shù)據(jù)，此時(shí)給 v-slot帶一個(gè)值來定義我們提供的插槽 prop 的名字：
學(xué)過react的同學(xué)應(yīng)該都知道react中的{…this.props}可以一次性傳遞屬性。那在vue中有沒有這個(gè)功能呢？當(dāng)屬性較多時(shí)，不需要我們一個(gè)個(gè)去傳遞？答案就是vue中的v-bind和v-on。示例4：v-bind&v-on實(shí)現(xiàn)屬性事件傳遞BaseList組件只有基礎(chǔ)的列表展示功能，此時(shí)需要為其增加排序功能。a) 創(chuàng)建一個(gè)高階組件SortList函數(shù)式組件是一種stateless和instanceless的組件，它內(nèi)部沒有生命周期處理方式，因而非常輕量，渲染性極高，當(dāng)需要?jiǎng)?chuàng)建的組件只需要根據(jù)外部數(shù)據(jù)的變化而變化時(shí)，就可以將其創(chuàng)建為函數(shù)式組件。l 在 template標(biāo)簽里面標(biāo)明 functional
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
