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