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