[[412995]]

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

在用 Vue 開發(fā)的這幾年里，我學(xué)到了很多有用的技巧。有些很取巧，有些幾乎每天都在用，有些則更高級--但它們都很有用。

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。

當(dāng)單單傳入的 true 或 false 來控制某些條件不能滿足需求時，我通常使用這個方法來做。

按鈕類型或警告類型(信息、成功、危險、警告)是最常見的用法、、。顏色也是一個很好的用途。

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)。

我們可以取組件的任何部分，將其封裝在一個插槽中，在外面我們可以用想要的任何內(nèi)容覆蓋組件的該部分。默認(rèn)情況下，它仍然會按照原來的方式工作，但這樣做會有了更多的選項

<template> 
  <button class="button" @click="$emit('click')"> 
    <slot> 
      <div class="formatting"> 
        {{ text }} 
      </div> 
    </slot> 
  </button> 
</template> 

現(xià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. 使用引號來監(jiān)聽嵌套屬性

你可能不知道這一點(diǎn)，我們可以通過使用引號輕松地直接監(jiān)聽嵌套值：

watch { 
  '$route.query.id'() { 
    // ... 
  } 
} 

4. 知道何時使用v-if(以及何時避免使用)

與其使用v-if，有時使用v-show來代替，會有更高的性能。

<ComplicatedChart v-show="chartEnabled" /> 

當(dāng)v-if被打開或關(guān)閉時，它將創(chuàng)建并完全銷毀該元素。相反，v-show將創(chuàng)建該元素并將其留在那里，通過設(shè)置其樣式為display: none來隱藏它。

如果你要切換的組件的渲染成本很高，那么這樣做會更有效率。

反過來說，如果不需要立即執(zhí)行昂貴的組件件，可以使用v-if，這樣它就會跳過渲染它，而使頁面的加載速度更快一些。

5. 單個作用域插槽的簡寫(不需要 template 標(biāo)簽)

限定范圍的插槽非常有趣，但為了使用它們，您還必須使用許多模板標(biāo)記。

幸運(yùn)的是，有一個簡寫可以讓我們擺脫它，但只有在我們使用單個作用域槽的情況下。

普通寫法：

<DataTable> 
  <template #header="tableAttributes"> 
    <TableHeader v-bind="tableAttributes" /> 
  </template> 
</DataTable> 

不使用 template:

<DataTable #header="tableAttributes"> 
  <TableHeader v-bind="tableAttributes" /> 
</DataTable> 

簡單、直截了當(dāng)，令人贊嘆不已。

6. 有條件地渲染插槽

我們先來看如何做，然后在討論為什么想隱藏插槽。

每個Vue組件都有一個特殊的$slots對象，里面有你所有的插槽。默認(rèn)槽的鍵是default，任何被命名的槽都使用其名稱作為鍵。

const $slots = { 
  default: <default slot>, 
  icon: <icon slot>, 
  button: <button slot>, 
}; 

但這個$slots對象只有適用于該組件的插槽，而不是每一個定義的插槽。

拿這個定義了幾個插槽的組件來說，包括幾個命名的插槽。

<!-- Slots.vue --> 
<template> 
  <div> 
    <h2>Here are some slots</h2> 
    <slot /> 
    <slot name="second" /> 
    <slot name="third" /> 
  </div> 
</template> 

如果我們只對組件應(yīng)用一個插槽，那么只有那個插槽會顯示在我們的$slots對象中。

<template> 
  <Slots> 
    <template #second> 
      This will be applied to the second slot. 
    </template> 
  </Slots> 
</template> 

$slots = { second: <vnode> } 

我們可以在我們的組件中使用這一點(diǎn)來檢測哪些插槽已經(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只有在我們用某些東西填充這個插槽時才會被渲染。

如果不使用v-if，那么如果沒有插槽，就會得到一個空的不必要的div。根據(jù)div的樣式，這可能會打亂我們的布局，讓界面看起來很奇怪。

那么，為什么我們希望能夠有條件地渲染插槽呢?

使用條件插槽的主要原因有三個:

• 當(dāng)使用封裝的div來添加默認(rèn)樣式時
• 插槽是空的
• 如果我們將默認(rèn)內(nèi)容與嵌套槽相結(jié)合

例如，當(dāng)我們在添加默認(rèn)樣式時，我們在插槽周圍添加一個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)用到該插槽中，我們最終會在頁面上渲染出一個空的div。

<div> 
  <h2>This is a pretty great component, amirite?</h2> 
  <div class="default-styling"> 
    <!-- 槽中沒有內(nèi)容，但這個div 仍然被渲染。糟糕 --> 
  </div> 
  <button @click="$emit('click')">Click me!</button> 
</div> 

解決方法就是像上面講的一樣，多個條件判斷，就行啦。

7. 如何監(jiān)聽一個插槽的變化

有時我們需要知道插槽內(nèi)的內(nèi)容何時發(fā)生了變化。

<!-- 可惜這個事件不存在 --> 
<slot @change="update" /> 

不幸的是，Vue沒有內(nèi)置的方法讓我們檢測這一點(diǎn)。

然而，我的朋友Austin想出了一個非常干凈的方法，使用MutationObserver來做這件事。

MutationObserver接口提供了監(jiān)視對DOM樹所做更改的能力。它被設(shè)計為舊的Mutation Events功能的替代品，該功能是DOM3 Events規(guī)范的一部分。

export default { 
  mounted() { 
    // 當(dāng)有變化時調(diào)用`update` 
    const observer = new MutationObserver(this.update); 
 
    // 監(jiān)聽此組件的變化 
    observer.observe(this.$el, { 
      childList: true, 
      subtree: true 
    }); 
  } 
}; 

這個涉及的內(nèi)容還是很多的，后面會單獨(dú)出一篇文章來講，記得關(guān)注刷碗智的公眾號 <大遷世界> 哦!

8. 將局部和全局的 style混合在一起

通常情況下，在處理樣式時，我們希望它們能被劃分到一個單獨(dú)的組件中。

<style scoped> 
  .component { 
    background: green; 
  } 
</style> 

不過，如果需要的話，也可以添加一個非作用域樣式塊來添加全局樣式

<style> 
  /* 全局 */ 
  .component p { 
    margin-bottom: 16px; 
  } 
</style> 
 
<style scoped> 
  /* 在該組件內(nèi)有效 */ 
  .component { 
    background: green; 
  } 
</style> 

但要小心，全局樣式是危險的，難以追蹤。但有時，它們是一個完美的逃生艙口，正是你所需要的。

9. 重寫子組件的樣式--正確的方法

Scoped CSS在保持內(nèi)容整潔方面非常棒，而且不會將樣式引入應(yīng)用的其他組件中。

但有時你需要覆蓋一個子組件的樣式，并跳出這個作用域。

Vue有一個 deep 選擇器：

<style scoped> 
.my-component >>> .child-component { 
  font-size: 24px; 
} 
</style> 

注意：如果你使用像SCSS這樣的CSS預(yù)處理器，你可能需要使用/deep/來代替。

10. 用上下文感知組件創(chuàng)造魔法

**上下文感知組件(context-aware)**是“魔法的”，它們自動適應(yīng)周圍發(fā)生的事情，處理邊緣情況、狀態(tài)共享等等。

有3種主要的 context-aware ，但 Configuration 是我最感興趣的一種。

1.狀態(tài)共享

當(dāng)你把一個大的組件分解成多個小的組件時，它們往往仍然需要共享狀態(tài)。

我們可以在 "幕后 "做這些工作，而不是把這些工作推給使用者。

我們一般會把 Dropdown 組件分解成 Select 和 Option 組件，這樣會獲得更多的靈活性。但是為了方便使用，Select 和Option組件彼此共享 selected 狀態(tài)。

<!-- 為簡單起見，作為一個單一組件使用 --> 
<Dropdown v-model="selected" :options="[]" /> 
 
<!-- 分多個組件，更靈活 --> 
<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

有時，一個組件的行為需要根據(jù)應(yīng)用程序的其他部分的情況來改變。這通常是為了自動處理邊緣情況，否則處理起來會很煩人。

一個 Popup 或 Tooltip 應(yīng)該重新定位，以便它不會溢出頁面。但是，如果該組件是在一個modal 內(nèi)，它應(yīng)該重新定位，以便它不會溢出 modal。

如果Tooltip知道它是在一個模態(tài)里面，這可以自動完成。

3.樣式

創(chuàng)建了 context-aware的CSS，根據(jù)父級或同級元素的情況應(yīng)用不同的樣式。

.statistic { 
  color: black; 
  font-size: 24px; 
  font-weight: bold; 
} 
 
.statistic + .statistic { 
  margin-left: 10px; 
} 

CSS變量讓我們更進(jìn)一步，允許我們在一個頁面的不同部分設(shè)置不同的值。

11. 如何在Vue之外創(chuàng)建一個具有響應(yīng)性的變量(Vue2和3)

如果你從Vue之外得到一個變量，讓它具有反應(yīng)性是很好的。

這樣，我們就可以在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來實(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)使用一個對象時，可以這樣使用 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ù)組，但它也允許我們遍歷一個范圍

<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時，它將從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 類型

我從一個子組件中復(fù)制 prop 類型，只是為了在一個父組件中使用它們。但我發(fā)現(xiàn)，偷取這些 prop 類型要比僅僅復(fù)制它們好得多。

例如，我們在這個組件中使用了一個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類型被更新時，我們肯定會忘記返回這個組件并更新它們。隨著時間的推移，當(dāng)該組件的 prop類型開始偏離Icon組件中的 prop 類型時，就會引入錯誤。

因此，這就是為什么我們要竊取組件的 prop 類型：

import Icon from './Icon'; 
export default { 
  components: { Icon }, 
  props: { 
    ...Icon.props, 
    heading: { 
      type: String, 
      required: true, 
    }, 
  }, 
}; 

不需要再復(fù)雜了。

除了在我們的例子中，我們把 icon 加在每個 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)。

但是，如果一個 prop 類型從 Icon 組件中被添加或刪除了呢?為了應(yīng)對這些情況，我們可以使用v-bind和一個計算的 prop 來保持動態(tài)。

16. 檢測元素外部(或內(nèi)部)的單擊

有時我需要檢測一個點(diǎn)擊是發(fā)生在一個特定元素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. 遞歸插槽

有一次，我決定看看我是否可以只用模板來做一個v-for組件。在這個過程中，我也發(fā)現(xiàn)了如何遞歸地使用槽。

<!-- VFor.vue --> 
<template> 
    <div> 
        <!--  渲染第一項 --> 
    {{ list[0] }} 
        <!-- 如果我們有更多的項目，繼續(xù)!但是不要使用我們剛剛渲染的項 --> 
    <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> 

下面是這個組件的使用方法。

<template> 
  <div> 
    <!-- 常規(guī)列表 --> 
    <v-for :list="list" /> 
 
    <!-- 加粗的項目列表 --> 
    <v-for :list="list"> 
      <template v-slot="{ item }"> 
        <strong>{{ item }}</strong> 
      </template> 
    </v-for> 
  </div> 
</template> 

18. 組件元數(shù)據(jù)

并不是添加到一個組件的每一點(diǎn)信息都是狀態(tài)。有時我們需要添加一些元數(shù)據(jù)，給其他組件提供更多信息。

例如，如果正在為谷歌 analytics這樣的分析儀表：

如果你想讓布局知道每個小組件應(yīng)該占多少列，你可以直接在組件上添加元數(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ù)對組件的每個實(shí)例都是一樣的，而且不是響應(yīng)式的。

這方面的其他用途包括(但不限于)：

• 保持單個組件的版本號
• 用于構(gòu)建工具的自定義標(biāo)志，以區(qū)別對待組件
• 在計算屬性、數(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> 

如果你需要分享樣式、文件或其他任何東西，這可能會非常方便。

20. 可重復(fù)使用的組件并不是你所想的那樣

可重復(fù)使用的組件不一定是大的或復(fù)雜的東西。

我經(jīng)常讓小的和短的組件可以重復(fù)使用。

因為我沒有到處重寫這段代碼，所以更新它變得更加容易，而且我可以確保每個OverflowMenu的外觀和工作方式都完全一樣--因為它們是一樣的!"。

<!-- OverflowMenu.vue --> 
<template> 
  <Menu> 
    <!-- 添加一個自定義按鈕來觸發(fā)我們的菜單   --> 
    <template #button v-slot="bind"> 
      <!-- 使用bind來傳遞click處理程序、a11y 屬性等 --> 
      <Button v-bind="bind"> 
        <template #icon> 
          <svg src="./ellipsis.svg" /> 
        </template> 
      </Button> 
    </template> 
  </Menu> 
</template> 

在這里，我們采用了一個菜單組件，但在觸發(fā)它的按鈕上添加了一個 ellipsis 圖標(biāo)。(省略號)的圖標(biāo)來觸發(fā)它的打開。

這似乎不值得把它做成一個可重復(fù)使用的組件，因為它只有幾行。難道我們就不能在每次要使用這樣的菜單時添加圖標(biāo)嗎?

但是這個OverflowMenu將被使用幾十次，現(xiàn)在如果我們想更新圖標(biāo)或它的行為，我們可以非常容易地做到。而且，使用它也更簡單了。

21. 從組件外部調(diào)用一個方法

我們可以從一個組件的外部通過給它一個 ref 用來調(diào)用一個方法。

<!-- Parent.vue --> 
<template> 
  <ChildComponent ref="child" /> 
</template> 

// Somewhere in Parent.vue 
this.$refs.child.method(); 

再解釋一下這個問題。

有時候，“最佳實(shí)踐”并不適用于你正在做的事情，你需要一個像這樣的逃生口。

通常情況下，我們使用 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)用時使用。如果您需要多次觸發(fā)此操作，則必須進(jìn)行清理并重置狀態(tài)。邏輯是這樣的

• 父組件將 true 傳遞給觸發(fā)器 prop
• Watch 被觸發(fā)，然后 Child 組件調(diào)用該方法
• 子組件發(fā)出一個事件，告訴父組件該方法已被成功觸發(fā)
• Parent組件將 trigger 重置為 false，所以我們可以從頭再來一次

相反，如果我們在子組件上設(shè)置一個 ref，我們可以直接調(diào)用該方法:

<!-- Parent.vue --> 
<template> 
  <ChildComponent ref="child" /> 
</template> 

// 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進(jìn)行深度鏈接

我們可以在URL中存儲(一點(diǎn))狀態(tài)，允許我們直接跳到頁面上的一個特定狀態(tài)。

例如，你加載一個已經(jīng)選擇了日期范圍過濾器的頁面：

someurl.com/edit?date-range=last-week 

這對于應(yīng)用中用戶可能共享大量鏈接的部分來說是非常棒的，對于服務(wù)器渲染的應(yīng)用，或者在兩個獨(dú)立的應(yīng)用之間通信的信息比普通鏈接通常提供的更多。

我們可以存儲過濾器、搜索值、模態(tài)框是打開還是關(guān)閉，或者在列表的哪個位置滾動以完美地實(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)簽的另一個用途

template 標(biāo)簽可以在模板中的任何地方使用，以更好地組織代碼。

我喜歡用它來簡化v-if邏輯，有時也用v-for。

在這個例子中，我們有幾個元素都使用同一個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)笨拙，而且一開始并不明顯，一堆這樣的元素被顯示和隱藏在一起。在一個更大、更復(fù)雜的組件上，這可能是一個更糟糕的情況

但我們能優(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. 處理錯誤(和警告)的更好方法

我們可以為Vue中的錯誤和警告提供一個自定義處理程序。

// Vue 3 
const app = createApp(App); 
app.config.errorHandler = (err) => { 
  alert(err); 
}; 
 
// Vue 2 
Vue.config.errorHandler = (err) => { 
  alert(err); 
}; 

像 Bugsnag 和 Rollbar 這樣的錯誤跟蹤服務(wù)，可以鉤住這些處理程序來記錄錯誤，但你也可以用它們來更優(yōu)雅地處理錯誤，以獲得更好的用戶體驗。

例如，如果一個錯誤未被處理，應(yīng)用程序不會直接崩潰，你可以顯示一個完整的錯誤屏幕，讓用戶刷新或嘗試其他東西。

在 Vue3 中，錯誤處理程序只能處理 template 和 watcher 錯誤，但是 Vue2的錯誤處理程序可以捕獲幾乎所有錯誤。這兩個版本中的警告處理程序只在開發(fā)階段有效。

作者：Michael Thiessen 譯者：前端小智 來源：dev原文：https://dev.to/michaelthiessen/25-vue-tips-you-ned-to-know-2h70