您好,登錄后才能下訂單哦!
1 狀態(tài)共享
隨著組件的細(xì)化,就會(huì)遇到多組件狀態(tài)共享的情況,Vuex當(dāng)然可以解決這類問(wèn)題,不過(guò)就像Vuex官方文檔所說(shuō)的,如果應(yīng)用不夠大,為避免代碼繁瑣冗余,最好不要使用它,今天我們介紹的是vue.js 2.6新增加的Observable API ,通過(guò)使用這個(gè)api我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況。
如下這個(gè)例子,我們將在組件外創(chuàng)建一個(gè)store,然后在App.vue組件里面使用store.js提供的store和mutation方法,同理其它組件也可以這樣使用,從而實(shí)現(xiàn)多個(gè)組件共享數(shù)據(jù)狀態(tài)。
首先創(chuàng)建一個(gè)store.js,包含一個(gè)store和一個(gè)mutations,分別用來(lái)指向數(shù)據(jù)和處理方法。
import Vue from "vue"; export const store = Vue.observable({ count: 0 }); export const mutations = { setCount(count) { store.count = count; } };
然后在App.vue里面引入這個(gè)store.js,在組件里面使用引入的數(shù)據(jù)和方法
<template> <div id="app"> <img width="25%" src="./assets/logo.png"> <p>count:{{count}}</p> <button @click="setCount(count+1)">+1</button> <button @click="setCount(count-1)">-1</button> </div> </template> <script> import { store, mutations } from "./store"; export default { name: "App", computed: { count() { return store.count; } }, methods: { setCount: mutations.setCount } }; </script> <style>
你可以點(diǎn)擊在線DEMO查看最終效果
2 長(zhǎng)列表性能優(yōu)化
我們應(yīng)該都知道vue會(huì)通過(guò)object.defineProperty對(duì)數(shù)據(jù)進(jìn)行劫持,來(lái)實(shí)現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化,然而有些時(shí)候我們的組件就是純粹的數(shù)據(jù)展示,不會(huì)有任何改變,我們就不需要vue來(lái)劫持我們的數(shù)據(jù),在大量數(shù)據(jù)展示的情況下,這能夠很明顯的減少組件初始化的時(shí)間,那如何禁止vue劫持我們的數(shù)據(jù)呢?可以通過(guò)object.freeze方法來(lái)凍結(jié)一個(gè)對(duì)象,一旦被凍結(jié)的對(duì)象就再也不能被修改了。
export default { data: () => ({ users: {} }), async created() { const users = await axios.get("/api/users"); this.users = Object.freeze(users); } };
另外需要說(shuō)明的是,這里只是凍結(jié)了users的值,引用不會(huì)被凍結(jié),當(dāng)我們需要reactive數(shù)據(jù)的時(shí)候,我們可以重新給users賦值。
export default { data: () => ({ users: [] }), async created() { const users = await axios.get("/api/users"); this.users = Object.freeze(users); }, methods:{ // 改變值不會(huì)觸發(fā)視圖響應(yīng) this.users[0] = newValue // 改變引用依然會(huì)觸發(fā)視圖響應(yīng) this.users = newArray } };
3 去除多余的樣式
隨著項(xiàng)目越來(lái)越大,書(shū)寫(xiě)的不注意,不自然的就會(huì)產(chǎn)生一些多余的css,小項(xiàng)目還好,一旦項(xiàng)目大了以后,多余的css會(huì)越來(lái)越多,導(dǎo)致包越來(lái)越大,從而影響項(xiàng)目運(yùn)行性能,所以有必要在正式環(huán)境去除掉這些多余的css,這里推薦一個(gè)庫(kù)purgecss,支持CLI、JavascriptApi、Webpack等多種方式使用,通過(guò)這個(gè)庫(kù),我們可以很容易的去除掉多余的css。
我做了一個(gè)測(cè)試,在線DEMO
<h2>Hello Vanilla!</h2> <div> We use Parcel to bundle this sandbox, you can find more info about Parcel <a rel="external nofollow" target="_blank" rel="noopener noreferrer">here</a>. </div> body { font-family: sans-serif; } a { color: red; } ul { li { list-style: none; } } import Purgecss from "purgecss"; const purgecss = new Purgecss({ content: ["**/*.html"], css: ["**/*.css"] }); const purgecssResult = purgecss.purge();
最終產(chǎn)生的purgecssResult結(jié)果如下,可以看到多余的a和ul標(biāo)簽的樣式都沒(méi)了
4 作用域插槽
利用好作用域插槽可以做一些很有意思的事情,比如定義一個(gè)基礎(chǔ)布局組件A,只負(fù)責(zé)布局,不管數(shù)據(jù)邏輯,然后另外定義一個(gè)組件B負(fù)責(zé)數(shù)據(jù)處理,布局組件A需要數(shù)據(jù)的時(shí)候就去B里面去取。假設(shè),某一天我們的布局變了,我們只需要去修改組件A就行,而不用去修改組件B,從而就能充分復(fù)用組件B的數(shù)據(jù)處理邏輯,關(guān)于這塊我之前寫(xiě)過(guò)一篇實(shí)際案例,可以點(diǎn)擊這里查看。
這里涉及到的一個(gè)最重要的點(diǎn)就是父組件要去獲取子組件里面的數(shù)據(jù),之前是利用slot-scope,自vue 2.6.0起,提供了更好的支持 slot 和 slot-scope 特性的 API 替代方案。
比如,我們定一個(gè)名為current-user的組件:
<span> <slot>{{ user.lastName }}</slot> </span>
父組件引用current-user的組件,但想用名替代姓(老外名字第一個(gè)單詞是名,后一個(gè)單詞是姓):
<current-user> {{ user.firstName }} </current-user>
這種方式不會(huì)生效,因?yàn)閡ser對(duì)象是子組件的數(shù)據(jù),在父組件里面我們獲取不到,這個(gè)時(shí)候我們就可以通過(guò)v-slot
來(lái)實(shí)現(xiàn)。
首先在子組件里面,將user作為一個(gè)<slot>元素的特性綁定上去:
<span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span>
之后,我們就可以在父組件引用的時(shí)候,給v-slot帶一個(gè)值來(lái)定義我們提供的插槽 prop 的名字:
<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user>
這種方式還有縮寫(xiě)語(yǔ)法,可以查看獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法,最終我們引用的方式如下:
<current-user v-slot="slotProps"> {{ slotProps.user.firstName }} </current-user>
相比之前slot-scope代碼更清晰,更好理解。
5 屬性事件傳遞
寫(xiě)過(guò)高階組件的童鞋可能都會(huì)碰到過(guò)將加工過(guò)的屬性向下傳遞的情況,如果碰到屬性較多時(shí),需要一個(gè)個(gè)去傳遞,非常不友好并且費(fèi)時(shí),有沒(méi)有一次性傳遞的呢(比如react里面的{...this.props})?答案就是v-bind和v-on。
舉個(gè)例子,假如有一個(gè)基礎(chǔ)組件BaseList,只有基礎(chǔ)的列表展示功能,現(xiàn)在我們想在這基礎(chǔ)上增加排序功能,這個(gè)時(shí)候我們就可以創(chuàng)建一個(gè)高階組件SortList。
<!-- SortList --> <template> <BaseList v-bind="$props" v-on="$listeners"> <!-- ... --> </BaseList> </template> <script> import BaseList from "./BaseList"; // 包含了基礎(chǔ)的屬性定義 import BaseListMixin from "./BaseListMixin"; // 封裝了排序的邏輯 import sort from "./sort.js"; export default { props: BaseListMixin.props, components: { BaseList } }; </script>
可以看到傳遞屬性和事件的方便性,而不用一個(gè)個(gè)去傳遞
6 函數(shù)式組件
函數(shù)式組件,即無(wú)狀態(tài),無(wú)法實(shí)例化,內(nèi)部沒(méi)有任何生命周期處理方法,非常輕量,因而渲染性能高,特別適合用來(lái)只依賴外部數(shù)據(jù)傳遞而變化的組件。
寫(xiě)法如下:
1.在template標(biāo)簽里面標(biāo)明functional
2.只接受props值
3.不需要script標(biāo)簽
<!-- App.vue --> <template> <div id="app"> <List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked = item)" /> <p>Clicked hero: {{ clicked }}</p> </div> </template> <script> import List from "./List"; export default { name: "App", data: () => ({ clicked: "" }), components: { List } }; </script> <!-- List.vue 函數(shù)式組件 --> <template functional> <div> <p v-for="item in props.items" @click="props.itemClick(item);"> {{ item }} </p> </div> </template>
7 監(jiān)聽(tīng)組件的生命周期
比如有父組件Parent和子組件Child,如果父組件監(jiān)聽(tīng)到子組件掛載mounted就做一些邏輯處理,常規(guī)的寫(xiě)法可能如下:
// Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); }
這里提供一種特別簡(jiǎn)單的方式,子組件不需要任何處理,只需要在父組件引用的時(shí)候通過(guò)@hook來(lái)監(jiān)聽(tīng)即可,代碼重寫(xiě)如下:
<Child @hook:mounted="doSomething"/>
當(dāng)然這里不僅僅是可以監(jiān)聽(tīng)mounted,其它的生命周期事件,例如:created,updated等都可以,是不是特別方便~
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。