新聞中心
學習成為一個更好的Vue開發(fā)者并不總是關(guān)于那些需要花時間和精力才能掌握的大概念。掌握一些技巧和竅門,可以讓我們的編程生活變得更容易--沒有大量重復的工作。

創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務領(lǐng)域包括:網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的向陽網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設(shè)合作伙伴!
在用 Vue 開發(fā)的這幾年里,我學到了很多有用的技巧。有些很取巧,有些幾乎每天都在用,有些則更高級--但它們都很有用。
1. 將一個 prop 限制在一個類型的列表中
使用 prop 定義中的 validator 選項,可以將一個 prop 類型限制在一組特定的值中。
- export default {
- name: 'Image',
- props: {
- src: {
- type: String,
- },
- style: {
- type: String,
- validator: s => ['square', 'rounded'].includes(s)
- }
- }
- };
這個驗證函數(shù)接受一個prop,如果prop有效或無效,則返回true或false。
當單單傳入的 true 或 false 來控制某些條件不能滿足需求時,我通常使用這個方法來做。
按鈕類型或警告類型(信息、成功、危險、警告)是最常見的用法、、。顏色也是一個很好的用途。
2. 默認內(nèi)容和擴展點
Vue中的槽可以有默認的內(nèi)容,這使我們可以制作出更容易使用的組件。
- Click me
我最喜歡使用默認槽,就是用它們來創(chuàng)建擴展點。
我們可以取組件的任何部分,將其封裝在一個插槽中,在外面我們可以用想要的任何內(nèi)容覆蓋組件的該部分。默認情況下,它仍然會按照原來的方式工作,但這樣做會有了更多的選項
- {{ text }}
現(xiàn)在我們可以用許多不同的方式使用這個組件。簡單的、默認的方式,或者自定義的方式。
- Do something a little different here
3. 使用引號來監(jiān)聽嵌套屬性
你可能不知道這一點,我們可以通過使用引號輕松地直接監(jiān)聽嵌套值:
- watch {
- '$route.query.id'() {
- // ...
- }
- }
4. 知道何時使用v-if(以及何時避免使用)
與其使用v-if,有時使用v-show來代替,會有更高的性能。
當v-if被打開或關(guān)閉時,它將創(chuàng)建并完全銷毀該元素。相反,v-show將創(chuàng)建該元素并將其留在那里,通過設(shè)置其樣式為display: none來隱藏它。
如果你要切換的組件的渲染成本很高,那么這樣做會更有效率。
反過來說,如果不需要立即執(zhí)行昂貴的組件件,可以使用v-if,這樣它就會跳過渲染它,而使頁面的加載速度更快一些。
5. 單個作用域插槽的簡寫(不需要 template 標簽)
限定范圍的插槽非常有趣,但為了使用它們,您還必須使用許多模板標記。
幸運的是,有一個簡寫可以讓我們擺脫它,但只有在我們使用單個作用域槽的情況下。
普通寫法:
不使用 template:
簡單、直截了當,令人贊嘆不已。
6. 有條件地渲染插槽
我們先來看如何做,然后在討論為什么想隱藏插槽。
每個Vue組件都有一個特殊的$slots對象,里面有你所有的插槽。默認槽的鍵是default,任何被命名的槽都使用其名稱作為鍵。
- const $slots = {
- default:
, - icon:
, - button:
- };
但這個$slots對象只有適用于該組件的插槽,而不是每一個定義的插槽。
拿這個定義了幾個插槽的組件來說,包括幾個命名的插槽。
Here are some slots
如果我們只對組件應用一個插槽,那么只有那個插槽會顯示在我們的$slots對象中。
- This will be applied to the second slot.
- $slots = { second:
}
我們可以在我們的組件中使用這一點來檢測哪些插槽已經(jīng)被應用到組件中,例如,通過隱藏插槽的包裝元素。
A wrapped slot
現(xiàn)在,應用樣式的包裝器div只有在我們用某些東西填充這個插槽時才會被渲染。
如果不使用v-if,那么如果沒有插槽,就會得到一個空的不必要的div。根據(jù)div的樣式,這可能會打亂我們的布局,讓界面看起來很奇怪。
那么,為什么我們希望能夠有條件地渲染插槽呢?
使用條件插槽的主要原因有三個:
- 當使用封裝的div來添加默認樣式時
- 插槽是空的
- 如果我們將默認內(nèi)容與嵌套槽相結(jié)合
例如,當我們在添加默認樣式時,我們在插槽周圍添加一個div:
This is a pretty great component, amirite?
然而,如果父組件沒有將內(nèi)容應用到該插槽中,我們最終會在頁面上渲染出一個空的div。
This is a pretty great component, amirite?
解決方法就是像上面講的一樣,多個條件判斷,就行啦。
7. 如何監(jiān)聽一個插槽的變化
有時我們需要知道插槽內(nèi)的內(nèi)容何時發(fā)生了變化。
不幸的是,Vue沒有內(nèi)置的方法讓我們檢測這一點。
然而,我的朋友Austin想出了一個非常干凈的方法,使用MutationObserver來做這件事。
MutationObserver接口提供了監(jiān)視對DOM樹所做更改的能力。它被設(shè)計為舊的Mutation Events功能的替代品,該功能是DOM3 Events規(guī)范的一部分。
- export default {
- mounted() {
- // 當有變化時調(diào)用`update`
- const observer = new MutationObserver(this.update);
- // 監(jiān)聽此組件的變化
- observer.observe(this.$el, {
- childList: true,
- subtree: true
- });
- }
- };
這個涉及的內(nèi)容還是很多的,后面會單獨出一篇文章來講,記得關(guān)注刷碗智的公眾號 <大遷世界> 哦!
8. 將局部和全局的 style混合在一起
通常情況下,在處理樣式時,我們希望它們能被劃分到一個單獨的組件中。
- .component {
- background: green;
- }
不過,如果需要的話,也可以添加一個非作用域樣式塊來添加全局樣式
- /* 全局 */
- .component p {
- margin-bottom: 16px;
- }
- /* 在該組件內(nèi)有效 */
- .component {
- background: green;
- }
但要小心,全局樣式是危險的,難以追蹤。但有時,它們是一個完美的逃生艙口,正是你所需要的。
9. 重寫子組件的樣式--正確的方法
Scoped CSS在保持內(nèi)容整潔方面非常棒,而且不會將樣式引入應用的其他組件中。
但有時你需要覆蓋一個子組件的樣式,并跳出這個作用域。
Vue有一個 deep 選擇器:
- .my-component >>> .child-component {
- font-size: 24px;
- }
注意:如果你使用像SCSS這樣的CSS預處理器,你可能需要使用/deep/來代替。
10. 用上下文感知組件創(chuàng)造魔法
**上下文感知組件(context-aware)**是“魔法的”,它們自動適應周圍發(fā)生的事情,處理邊緣情況、狀態(tài)共享等等。
有3種主要的 context-aware ,但 Configuration 是我最感興趣的一種。
1.狀態(tài)共享
當你把一個大的組件分解成多個小的組件時,它們往往仍然需要共享狀態(tài)。
我們可以在 "幕后 "做這些工作,而不是把這些工作推給使用者。
我們一般會把 Dropdown 組件分解成 Select 和 Option 組件,這樣會獲得更多的靈活性。但是為了方便使用,Select 和Option組件彼此共享 selected 狀態(tài)。
2. Configuration
有時,一個組件的行為需要根據(jù)應用程序的其他部分的情況來改變。這通常是為了自動處理邊緣情況,否則處理起來會很煩人。
一個 Popup 或 Tooltip 應該重新定位,以便它不會溢出頁面。但是,如果該組件是在一個modal 內(nèi),它應該重新定位,以便它不會溢出 modal。
如果Tooltip知道它是在一個模態(tài)里面,這可以自動完成。
3.樣式
創(chuàng)建了 context-aware的CSS,根據(jù)父級或同級元素的情況應用不同的樣式。
- .statistic {
- color: black;
- font-size: 24px;
- font-weight: bold;
- }
- .statistic + .statistic {
- margin-left: 10px;
- }
CSS變量讓我們更進一步,允許我們在一個頁面的不同部分設(shè)置不同的值。
11. 如何在Vue之外創(chuàng)建一個具有響應性的變量(Vue2和3)
如果你從Vue之外得到一個變量,讓它具有反應性是很好的。
這樣,我們就可以在computed props、watch和其他任何地方使用它,它的工作方式就像Vue中的任何其他狀態(tài)一樣。
如果我們使用的選項API,需要的只是將其放在組件的數(shù)據(jù)部分中:
- const externalVariable = getValue();
- export default {
- data() {
- return {
- reactiveVariable: externalVariable,
- };
- }
- };
如果使用Vue3的組合API,可以直接使用ref或reactive。
- import { ref } from 'vue';
- // 可以完全在Vue組件之外完成
- const externalVariable = getValue();
- const reactiveVariable = ref(externalVariable);
- console.log(reactiveVariable.value);
使用 reactive 代替:
- import { reactive } from 'vue';
- // 可以完全在Vue組件之外完成
- const externalVariable = getValue();
- // reactive 只對對象和數(shù)組起作用
- const anotherReactiveVariable = reactive(externalVariable);
- // Access directly
- console.log(anotherReactiveVariable);
如果你還在使用 Vue2,你可以使用observable而不是reactive來實現(xiàn)完全相同的結(jié)果。
12. v-for 中的解構(gòu)
你知道可以在-vfor中使用解構(gòu)嗎?
- v-for="{ name, id } in users"
- :key="id"
- >
- {{ name }}
更廣為人知的是,可以通過使用這樣的元組從v-for中取出索引。
- 'Lion King',
- 'Frozen',
- 'The Princess Bride'
- ]">
- {{ index + 1 }} - {{ movie }}
當使用一個對象時,可以這樣使用 key:
- name: 'Lion King',
- released: 2019,
- director: 'Jon Favreau',
- }">
- {{ key }}: {{ value }}
也可以將這兩種方法結(jié)合起來,獲取key以及屬性的 index。
- name: 'Lion King',
- released: 2019,
- director: 'Jon Favreau',
- }">
- #{{ index + 1 }}. {{ key }}: {{ value }}
13. 在指定范圍內(nèi)循環(huán)
v-for指令允許我們遍歷數(shù)組,但它也允許我們遍歷一個范圍
- Item #{{ n }}
渲染結(jié)果:
- Item #1
- Item #2
- Item #3
- Item #4
- Item #5
當我們使用帶范圍的v-for時,它將從1開始,以我們指定的數(shù)字結(jié)束。
14. 監(jiān)聽你的組件中的任何東西
- export default {
- computed: {
- someComputedProperty() {
- // Update the computed prop
- },
- },
- watch: {
- someComputedProperty() {
- // Do something when the computed prop is updated
- }
- }
- };
我們可以監(jiān)聽:
- 計算屬性
- props
- 嵌套值
如果你使用組合API,任何值都可以被監(jiān)視,只要它是一個ref或reactive對象。
15.竊取 prop 類型
我從一個子組件中復制 prop 類型,只是為了在一個父組件中使用它們。但我發(fā)現(xiàn),偷取這些 prop 類型要比僅僅復制它們好得多。
例如,我們在這個組件中使用了一個Icon組件。
{{ heading }}
- :type="iconType"
- :size="iconSize"
- :colour="iconColour"
- />
為了讓它工作,我們需要添加正確的 prop 類型,從``Icon`組件復制。
- import Icon from './Icon';
- export default {
- components: { Icon },
- props: {
- iconType: {
- type: String,
- required: true,
- },
- iconSize: {
- type: String,
- default: 'medium',
- validator: size => [
- 'small',
- 'medium',
- 'large',
- 'x-large'
- ].includes(size),
- },
- iconColour: {
- type: String,
- default: 'black',
- },
- heading: {
- type: String,
- required: true,
- },
- },
- };
多么痛苦啊。
當 Icon 組件的 prop類型被更新時,我們肯定會忘記返回這個組件并更新它們。隨著時間的推移,當該組件的 prop類型開始偏離Icon組件中的 prop 類型時,就會引入錯誤。
因此,這就是為什么我們要竊取組件的 prop 類型:
- import Icon from './Icon';
- export default {
- components: { Icon },
- props: {
- ...Icon.props,
- heading: {
- type: String,
- required: true,
- },
- },
- };
不需要再復雜了。
除了在我們的例子中,我們把 icon 加在每個 prop 名稱的開頭。所以我們必須做一些額外的工作來實現(xiàn)這一點。
- import Icon from './Icon';
- const iconProps = {};
- Object.entries(Icon.props).forEach((key, val) => {
- iconProps[`icon${key.toUpperCase()}`] = val;
- });
- export default {
- components: { Icon },
- props: {
- ...iconProps,
- heading: {
- type: String,
- required: true,
- },
- },
- };
現(xiàn)在,如果Icon組件中的 prop 類型被修改,我們的組件將保持最新狀態(tài)。
但是,如果一個 prop 類型從 Icon 組件中被添加或刪除了呢?為了應對這些情況,我們可以使用v-bind和一個計算的 prop 來保持動態(tài)。
16. 檢測元素外部(或內(nèi)部)的單擊
有時我需要檢測一個點擊是發(fā)生在一個特定元素el的內(nèi)部還是外部。這就是我通常使用的方法。
- window.addEventListener('mousedown', e => {
- // 獲取被點擊的元素
- const clickedEl = e.target;
- if (el.contains(clickedEl)) {
- //在 "el "里面點擊了
- } else {
- //在 "el "外點擊了
- }
- });
17. 遞歸插槽
有一次,我決定看看我是否可以只用模板來做一個v-for組件。在這個過程中,我也發(fā)現(xiàn)了如何遞歸地使用槽。
- {{ list[0] }}
- v-if="list.length > 1"
- :list="list.slice(1)"
- />
如果你想用作用域插槽來做這件事,只是需要一些調(diào)整
- {{ list[0] }}
- v-if="list.length > 1"
- :list="list.slice(1)"
- >
下面是這個組件的使用方法。
- {{ item }}
18. 組件元數(shù)據(jù)
并不是添加到一個組件的每一點信息都是狀態(tài)。有時我們需要添加一些元數(shù)據(jù),給其他組件提供更多信息。
例如,如果正在為谷歌 analytics這樣的分析儀表:
如果你想讓布局知道每個小組件應該占多少列,你可以直接在組件上添加元數(shù)據(jù)。
- export default {
- name: 'LiveUsersWidget',
- // 只需將其作為一個額外的屬性添加
- columns: 3,
- props: {
- // ...
- },
- data() {
- return {
- //...
- };
- },
- };
- export default {
- name: 'LiveUsersWidget',
- // 只需將其作為一個額外的屬性添加
- columns: 3,
- props: {
- // ...
- },
- data() {
- return {
- //...
- };
- },
- };
你會發(fā)現(xiàn)這個元數(shù)據(jù)是組件上的一個屬性。
- import LiveUsersWidget from './LiveUsersWidget.vue';
- const { columns } = LiveUsersWidget;
我們也可以通過特殊的$options屬性從組件內(nèi)部訪問元數(shù)據(jù)。
- export default {
- name: 'LiveUsersWidget',
- columns: 3,
- created() {
- // `$options` contains all the metadata for a component
- console.log(`Using ${this.$options.metadata} columns`);
- },
- };
只要記住,這個元數(shù)據(jù)對組件的每個實例都是一樣的,而且不是響應式的。
這方面的其他用途包括(但不限于):
- 保持單個組件的版本號
- 用于構(gòu)建工具的自定義標志,以區(qū)別對待組件
- 在計算屬性、數(shù)據(jù)、watch 等之外為組件添加自定義功能
- 其它
19. 多文件單文件組件
這是**SFC(單文件組件)**的一點已知功能。
可以像常規(guī)HTML文件一樣導入文件:
如果你需要分享樣式、文件或其他任何東西,這可能會非常方便。
20. 可重復使用的組件并不是你所想的那樣
可重復使用的組件不一定是大的或復雜的東西。
我經(jīng)常讓小的和短的組件可以重復使用。
因為我沒有到處重寫這段代碼,所以更新它變得更加容易,而且我可以確保每個OverflowMenu的外觀和工作方式都完全一樣--因為它們是一樣的!"。
在這里,我們采用了一個菜單組件,但在觸發(fā)它的按鈕上添加了一個 ellipsis 圖標。(省略號)的圖標來觸發(fā)它的打開。
這似乎不值得把它做成一個可重復使用的組件,因為它只有幾行。難道我們就不能在每次要使用這樣的菜單時添加圖標嗎?
但是這個OverflowMenu將被使用幾十次,現(xiàn)在如果我們想更新圖標或它的行為,我們可以非常容易地做到。而且,使用它也更簡單了。
21. 從組件外部調(diào)用一個方法
我們可以從一個組件的外部通過給它一個 ref 用來調(diào)用一個方法。
- // Somewhere in Parent.vue
- this.$refs.child.method();
再解釋一下這個問題。
有時候,“最佳實踐”并不適用于你正在做的事情,你需要一個像這樣的逃生口。
通常情況下,我們使用 props 和 events 在組件之間進行交流。props 被下發(fā)到子組件中,而events 被上發(fā)到父組件中。
- :tell-me-what-to-do="someInstructions"
- @something-happened="hereIWillHelpYouWithThat"
- />
- // Child.vue
- export default {
- props: ['trigger'],
- watch: {
- shouldCallMethod(newVal) {
- if (newVal) {
- // Call the method when the trigger is set to `true`
- this.method();
- }
- }
- }
- }
這可以正常工作,但只能在第一次調(diào)用時使用。如果您需要多次觸發(fā)此操作,則必須進行清理并重置狀態(tài)。邏輯是這樣的
- 父組件將 true 傳遞給觸發(fā)器 prop
- Watch 被觸發(fā),然后 Child 組件調(diào)用該方法
- 子組件發(fā)出一個事件,告訴父組件該方法已被成功觸發(fā)
- Parent組件將 trigger 重置為 false,所以我們可以從頭再來一次
相反,如果我們在子組件上設(shè)置一個 ref,我們可以直接調(diào)用該方法:
- // Somewhere in Parent.vue
- this.$refs.child.method();
是的,我們打破了 “props down, events up"” 的規(guī)則,我們打破了封裝,但是這樣做更清晰,更容易理解,所以是值得的
有時,"最好的 "解決方案最終會成為最糟糕的解決方案。
22. 監(jiān)聽數(shù)組和對象
使用 watcher 最棘手的部分是,有時它似乎不能正確觸發(fā)。
通常,這是因為我們試圖監(jiān)聽數(shù)組或?qū)ο?,但沒有將deep設(shè)置為true
- export default {
- name: 'ColourChange',
- props: {
- colours: {
- type: Array,
- required: true,
- },
- },
- watch: {
- // 使用對象語法,而不僅僅是方法
- colours: {
- // 這將讓Vue知道要在數(shù)組內(nèi)部尋找
- deep: true,
- handler()
- console.log('The list of colours has changed!');
- }
- }
- }
- }
使用Vue 3的API會是這樣的:
- watch(
- colours,
- () => {
- console.log('The list of colours has changed!');
- },
- {
- deep: true,
- }
- );
23. 用Vue Router進行深度鏈接
我們可以在URL中存儲(一點)狀態(tài),允許我們直接跳到頁面上的一個特定狀態(tài)。
例如,你加載一個已經(jīng)選擇了日期范圍過濾器的頁面:
- someurl.com/edit?date-range=last-week
這對于應用中用戶可能共享大量鏈接的部分來說是非常棒的,對于服務器渲染的應用,或者在兩個獨立的應用之間通信的信息比普通鏈接通常提供的更多。
我們可以存儲過濾器、搜索值、模態(tài)框是打開還是關(guān)閉,或者在列表的哪個位置滾動以完美地實現(xiàn)無限分頁。
使用 vue-router 獲取查詢參數(shù)是這樣工作的(這也適用于大多數(shù)Vue框架,如Nuxt和Vuepress):
- const dateRange = this.$route.query.dateRange;
為了改變它,我們使用 RouterLink 組件并更新 query。
- query: {
- dateRange: newDateRange
- }
- }">
24. template 標簽的另一個用途
template 標簽可以在模板中的任何地方使用,以更好地組織代碼。
我喜歡用它來簡化v-if邏輯,有時也用v-for。
在這個例子中,我們有幾個元素都使用同一個v-if條件。
- {{ title }}
- {{ subheading }}
- v-if="expanded"
- class="card-content"
- >
這有點笨拙,而且一開始并不明顯,一堆這樣的元素被顯示和隱藏在一起。在一個更大、更復雜的組件上,這可能是一個更糟糕的情況
但我們能優(yōu)化它。
我們可以使用 template 標簽來分組這些元素,并將 v-if 提升到模板 template 本身。
- {{ title }}
- {{ subheading }}
現(xiàn)在看起來就更容易理解,而且它在做什么,一目了然。
25. 處理錯誤(和警告)的更好方法
我們可以為Vue中的錯誤和警告提供一個自定義處理程序。
- // Vue 3
- const app = createApp(App);
- app.config.errorHandler = (err) => {
- alert(err);
- };
- // Vue 2
- Vue.config.errorHandler = (err) => {
- alert(err);
- };
像 Bugsnag 和 Rollbar 這樣的錯誤跟蹤服務,可以鉤住這些處理程序來記錄錯誤,但你也可以用它們來更優(yōu)雅地處理錯誤,以獲得更好的用戶體驗。
例如,如果一個錯誤未被處理,應用程序不會直接崩潰,你可以顯示一個完整的錯誤屏幕,讓用戶刷新或嘗試其他東西。
在 Vue3 中,錯誤處理程序只能處理 template 和 watcher 錯誤,但是 Vue2的錯誤處理程序可以捕獲幾乎所有錯誤。這兩個版本中的警告處理程序只在開發(fā)階段有效。
作者:Michael Thiessen 譯者:前端小智 來源:dev原文:https://dev.to/michaelthiessen
當前標題:25個Vue技巧,開發(fā)了5年了,才知道還能這么用
文章出自:http://fisionsoft.com.cn/article/dpjoodd.html


咨詢
建站咨詢
