一定要知道的 25 個(gè) Vue 技巧

更新時(shí)間：2021年11月02日 11:38:07 作者：海擁

這篇文章主要給大家分享將 prop 限制為類型列表、默認(rèn)內(nèi)容和擴(kuò)展點(diǎn)、使用引號(hào)觀察嵌套值、知道何時(shí)使用 v-if、單作用域 slot 的簡寫、有條件地渲染slot等25 個(gè)Vue 技巧，下文是下相關(guān)資料,需要的朋友可以參考一下

1. 將 prop 限制為類型列表

在 prop 定義中使用 validator 選項(xiàng)，你可以將 prop 限制為一組特定的值：

export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

這個(gè) validator 函數(shù)接受一個(gè) prop，返回 true 或 false。當(dāng)你需要比布爾值允許的更多選項(xiàng)時(shí)，也可以使用它。按鈕類型或警報(bào)類型（信息、成功、危險(xiǎn)、警告）是一些比較常見的用途。

2. 默認(rèn)內(nèi)容和擴(kuò)展點(diǎn)

Vue 中的slot可以具有默認(rèn)內(nèi)容，這使你可以制作更易于使用的組件：

<button class="button" @click="$emit('click')">
  <slot>
    <!-- 如果沒有提供slot則使用 -->
    Click me
  </slot>
</button>

基本上你可以獲取組件的任何部分，將其包裝在一個(gè)slot中，然后你可以使用你想要的任何內(nèi)容覆蓋該組件的該部分。默認(rèn)情況下，它仍然會(huì)像往常一樣工作，你還可以有更多選擇：

<template>
  <button class="button" @click="$emit('click')">
    <!-- 一開始在 slot 標(biāo)簽中添加什么都不做 -->
    <!-- 我們可以通過向 slot 提供內(nèi)容來覆蓋它 -->
    <slot>
      <div class="formatting">
        {{ text }}
      </div>
    </slot>
  </button>
</template>

現(xiàn)在你可以以多種不同的方式使用該組件。

簡單的默認(rèn)方式或你自己的自定義方式：

<!-- 使用組件的默認(rèn)功能 -->
<ButtonWithExtensionPoint text="Formatted text" />

<!-- 使用擴(kuò)展點(diǎn)創(chuàng)建自定義行為 -->
<ButtonWithExtensionPoint>
  <div class="different-formatting">
    在這里做一些不同的事情
  </div>
</ButtonWithExtensionPoint>

3. 使用引號(hào)觀察嵌套值

你可能不知道這一點(diǎn)：只需使用引號(hào)就可以輕松地直接查看嵌套值：

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

這對(duì)于處理深度嵌套的對(duì)象非常有用

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

有時(shí)不使用v-if，使用v-show會(huì)更高效：

<ComplicatedChart v-show="chartEnabled" />

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

如果你需要切換的組件渲染起來代價(jià)比較高，那么這樣做會(huì)更有效率。另一方面，如果你不需要立即使用那個(gè)組件，可以使用v-if以便它跳過渲染它并更快地加載頁面。

5. 單作用域 slot 的簡寫（不需要模板標(biāo)簽?。?/h2>

Scoped slot 比較有趣，但為了使用它們，你也必須使用很多template標(biāo)簽。

然而有一個(gè)速記可以讓我們擺脫它，但前提是我們使用單個(gè)作用域slot。

可以不用這樣寫：

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

我們可以這樣寫：

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

這樣更簡單、直接。

6. 有條件地渲染slot

每個(gè) Vue 組件都有一個(gè)特殊的 $slots 對(duì)象，其中包含所有slot。默認(rèn)slot具有默認(rèn)鍵，名字命名的slot都使用它們的名稱作為鍵：

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

但是這個(gè)$slots對(duì)象只有應(yīng)用于組件的slot，而不是每個(gè)定義的slot。

以這個(gè)定義了幾個(gè)slot的組件為例，包括幾個(gè)命名的slot：

<!-- Slots.vue -->
<template>
  <div>
    <h2>這里是一些slots</h2>
    <slot />
    <slot name="second" />
    <slot name="third" />
  </div>
</template>

如果我們只對(duì)組件應(yīng)用一個(gè)slot，則只有該slot會(huì)出現(xiàn)在我們的$slots對(duì)象中：

<template>
  <Slots>
    <template #second>
      這將應(yīng)用于第二個(gè)slot
    </template>
  </Slots>
</template>

$slots = { second: <vnode> }

我們可以在我們的組件中使用它來檢測哪些slot已應(yīng)用于組件，

例如：通過隱藏slot的包裝元素：\

<template>
  <div>
    <h2>一個(gè)包裹的slot</h2>
    <div v-if="$slots.default" class="styles">
      <slot />
    </div>
  </div>
</template>

現(xiàn)在div，應(yīng)用樣式的包裝器只有在我們實(shí)際用某些東西填充該slot時(shí)才會(huì)呈現(xiàn)。

如果我們不使用v-if，div如果我們沒有slot，我們最終會(huì)得到一個(gè)空的和不必要的。根據(jù)所div具有的樣式，這可能會(huì)弄亂我們的布局并使事情看起來很奇怪。

6.1 為什么我們希望能夠有條件地渲染slot呢？

使用條件slot主要有以下三個(gè)原因：

使用 wrapper div 來添加默認(rèn)樣式時(shí)
slot是空的
當(dāng)我們將默認(rèn)內(nèi)容與嵌套slot組合

例如，當(dāng)我們添加默認(rèn)樣式時(shí)，我們會(huì)在slot周圍添加一個(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)用到該slot，我們最終會(huì)在頁面div上呈現(xiàn)一個(gè)空的：\

<div>
  <h2>這是一個(gè)非常棒的組件</h2>
  <div class="default-styling">
    <!-- slot中沒有內(nèi)容，但仍會(huì)呈現(xiàn)此 div-->
  </div>
  <button @click="$emit('click')">Click me!</button>
</div>

v-if在包裝上添加它div可以解決問題。沒有應(yīng)用到slot的內(nèi)容？像這樣：\

<div>
  <h2>這是一個(gè)非常棒的組件</h2>
  <button @click="$emit('click')">Click me!</button>
</div>

7. 如何觀察slot的變化

有時(shí)我們需要知道slot內(nèi)的內(nèi)容什么時(shí)候發(fā)生了變化：

<!-- 可惜這個(gè)活動(dòng)不存在 -->
<slot @change="update" />

可惜 Vue 沒有內(nèi)置的方法來檢測這一點(diǎn)，使用突變觀察器一種非常簡潔的方法：

export default {
  mounted() {
    // 當(dāng)事情發(fā)生變化時(shí)調(diào)用`update`
    const observer = new MutationObserver(this.update);

    // 觀察這個(gè)組件的變化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

8. 將本地和全局風(fēng)格混合在一起

通常在使用樣式時(shí)我們希望它們被限定為單個(gè)組件：

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

如果你需要還可以添加一個(gè)非作用域樣式塊來添加全局樣式：

<style>
  /*全局應(yīng)用*/
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /*范圍限定于此特定組件*/
  .component {
    background: green;
  }
</style>

9. 覆蓋子組件的樣式——正確的方法

Scoped CSS 比較容易保持整潔，并且不會(huì)意外地將樣式滲入應(yīng)用程序的其他部分。但有時(shí)你需要覆蓋子組件的樣式，并突破該范圍。

Vue 有一個(gè)deep專門用于此的選擇器：

<style scoped>
/* 覆蓋子組件的 CSS，同時(shí)保持樣式范圍*/
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

注意：如果你使用的是 SCSS 之類的 CSS 預(yù)處理器，則可能需要改用/deep/。

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

上下文感知組件是“神奇的”——它們可以自動(dòng)適應(yīng)周圍發(fā)生的事情，處理邊緣情況，狀態(tài)共享等等。有 3 種主要類型的上下文感知組件，但是我覺得配置是其中最有趣的一種。

10.1 狀態(tài)共享

當(dāng)你將一個(gè)大組件分解成多個(gè)小組件時(shí)，它們通常仍然需要共享狀態(tài)。你可以“在幕后”實(shí)現(xiàn)這一點(diǎn)，而不是將這項(xiàng)工作推給使用組件的人。

可以將一個(gè)Dropdown組件分解為Select和Option組件以提供更大的靈活性。但是為了更容易使用，Select和Option組件彼此共享selected狀態(tài)：

<!-- 為簡單起見用作單個(gè)組件 -->
<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>

10.2 配置

有時(shí)需要根據(jù)應(yīng)用程序其余部分的情況更改組件的行為。這樣做通常是為了自動(dòng)處理邊緣情況，否則會(huì)很麻煩。Popup或者Tooltip應(yīng)該重新定位自己，這樣它就不會(huì)溢出頁面。但是，如果該組件位于 modal 內(nèi)部，則它應(yīng)該重新定位自身，以免溢出modal。如果Tooltip知道它何時(shí)在模態(tài)內(nèi)，這可以自動(dòng)完成。

10.3 造型

當(dāng)你創(chuàng)建了上下文感知 CSS，根據(jù)父元素或兄弟元素中發(fā)生的情況應(yīng)用不同的樣式。

.statistic {
  color: black;
  font-size: 24px;
  font-weight: bold;
}

/* 在彼此相鄰的統(tǒng)計(jì)數(shù)據(jù)之間進(jìn)行一些分離*/
.statistic + .statistic {
  margin-left: 10px;
}

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

11. 如何使在 Vue 之外創(chuàng)建的變量具有響應(yīng)性？

如果你從 Vue 外部獲得一個(gè)變量，那么能夠使其具有響應(yīng)性就很好。這樣你就可以在計(jì)算道具、觀察者和其他任何地方使用它，它就像 Vue 中的任何其他狀態(tài)一樣工作。

當(dāng)你正在使用 options API，你只需將它放在data組件的部分中：

const externalVariable = getValue();

export default {
  data() {
    return {
      reactiveVariable: externalVariable,
    };
  }
};

當(dāng)你在 Vue 3 中使用組合 API，則可以使用ref或reactive這樣：

import { ref } from 'vue';

// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);

// 使用 .value 訪問
console.log(reactiveVariable.value);

使用reactive來代替：\

import { reactive } from 'vue';

// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
// Reactive 僅適用于對(duì)象和數(shù)組
const anotherReactiveVariable = reactive(externalVariable);

// 直接訪問
console.log(anotherReactiveVariable);

如果你仍在使用 Vue 2（就像我們中的許多人一樣），你可以使用observable而不是reactive獲得完全相同的結(jié)果。

12. 在 v-for 中解構(gòu)

你知道你可以在 v-for 中解構(gòu)嗎？

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

眾所周知，你可以使用這樣的元組從 v-for 中獲取索引：

<li v-for="(value, key) in [
  'Hai Yong',
  'Frozen',
  'Web Beginner'
]">
  {{ index + 1 }} - {{ value }}
</li>

使用對(duì)象時(shí)，你還可以抓住key：

<li v-for="(value, key) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  {{ key }}: {{ value }}
</li>

也可以結(jié)合這兩種方法，獲取屬性的鍵和索引：

<li v-for="(value, key, index) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

13. 在 Vue 中循環(huán)一個(gè)范圍

v-for指令允許我們遍歷一個(gè)數(shù)組，但它也讓我們遍歷一個(gè)范圍：

<template>
  <ul>
    <li v-for="n in 5">項(xiàng)目#{{ n }}</li>
  </ul>
</template>

顯示效果：

項(xiàng)目#1
項(xiàng)目#2
項(xiàng)目#3
項(xiàng)目#4
項(xiàng)目#5

當(dāng)我們使用v-for范圍時(shí)，它將從 1 開始并以我們指定的數(shù)字結(jié)束。

14. 觀察組件中的任何內(nèi)容

你的組件中的任何響應(yīng)都可以被觀察到：

export default {
  computed: {
    someComputedProperty() {
      // 更新計(jì)算道具
    },
  },
  watch: {
    someComputedProperty() {
      // 當(dāng)計(jì)算的 prop 更新時(shí)做一些事情
    }
  }
};

你可以看：

計(jì)算道具
道具
嵌套值

如果你使用組合 API，只要它是一個(gè)ref或reactive對(duì)象就可以監(jiān)視任何值，。

15. 竊取道具類型

從子組件復(fù)制 prop 類型，只是為了在父組件中使用它們。但竊取這些道具類型比只是復(fù)制它們要好得多。

例如，我們Icon在這個(gè)組件中使用了一個(gè)組件：

<template>
  <div>
    <h2>{{ heading }}</h2>
    <Icon
      :type="iconType"
      :size="iconSize"
      :colour="iconColour"
    />
  </div>
</template>

為了讓它工作，我們需要添加正確的道具類型，從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í)間的推移，隨著該組件的 prop 類型開始偏離組件中的 prop 類型，將引入錯(cuò)誤Icon。

所以這就是為什么我們會(huì)竊取它們：

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

除了在我們的示例中，我們在每個(gè)道具名稱的開頭添加了“icon” 所以我們必須做一些額外的工作來實(shí)現(xiàn)這一點(diǎn)：

import Icon from './Icon';

const iconProps = {};

// Do some processing beforehand
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val;
});

export default {
  components: { Icon },
  props: {
    ...iconProps,
    heading: {
      type: String,
      required: true,
    },
  },
};

現(xiàn)在，如果Icon組件中的 prop 類型被修改，我們的組件將保持最新。

但是如果在Icon組件中添加或刪除了一個(gè) prop 類型呢？為了涵蓋這些情況，我們可以使用v-bind計(jì)算道具來保持動(dòng)態(tài)。

16. 檢測元素外部（或內(nèi)部）的點(diǎn)擊

有時(shí)我們需要檢測點(diǎn)擊是發(fā)生在特定元素el的內(nèi)部還是外部。這是我們通常使用的方法：

window.addEventListener('mousedown', e => {
  // 獲取被點(diǎn)擊的元素
  const clickedEl = e.target;

  // `el` 是你正在檢測外部點(diǎn)擊的元素
  if (el.contains(clickedEl)) {
    // 單擊“el”內(nèi)部
  } else {
    // 在`el`之外點(diǎn)擊
  }
});

17. 遞歸槽

我們是否可以v-for只使用模板來制作一個(gè)組件？在此過程中，我發(fā)現(xiàn)了如何遞歸地使用slot。

這是組件的樣子：

<!-- 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>

如果你想用作用域slot來做這件事——為什么不呢？！— 只需要進(jìn)行一些調(diào)整：<

template>
  <div>
    <!-- 將項(xiàng)目傳遞到要渲染的slot中 -->
    <slot v-bind:item="list[0]">
      <!-- Default -->
      {{ list[0] }}
    </slot>

    <v-for
      v-if="list.length > 1"
      :list="list.slice(1)"
    >
      <!-- 遞歸向下傳遞作用域slot -->
      <template v-slot="{ item }">
        <slot v-bind:item="item" />
      </template>
    </v-for>
  </div>
</template>

以下是該組件的使用方法：

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

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

例如：如果你要為 Google Analytics 等分析儀表板構(gòu)建一堆不同的小部件：

如果你希望布局知道每個(gè)小部件應(yīng)占用多少列，你可以將其作為元數(shù)據(jù)直接添加到組件上：

export default {
  name: 'LiveUsersWidget',
  // 👇 只需將其添加為額外屬性
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

你會(huì)發(fā)現(xiàn)此元數(shù)據(jù)是組件上的一個(gè)屬性：

import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;

你還可以通過特殊$options屬性從組件內(nèi)部訪問元數(shù)據(jù)：

export default {
  name: 'LiveUsersWidget',
  columns: 3,
  created() {
    // 👇 `$options` 包含組件的所有元數(shù)據(jù)
    console.log(`Using ${this.$options.metadata} columns`);
  },
};

請(qǐng)記住，此元數(shù)據(jù)對(duì)于組件的每個(gè)實(shí)例都是相同的，并且不是響應(yīng)式的。

其他用途包括（但不限于）：

保留各個(gè)組件的版本號(hào)
用于構(gòu)建工具的自定義標(biāo)志以區(qū)別對(duì)待組件
向組件添加自定義功能，超出計(jì)算道具、數(shù)據(jù)、觀察者等。

19. 多文件單文件組件

這是 SFC 的一個(gè)鮮為人知的功能。你可以像使用常規(guī) HTML 文件一樣導(dǎo)入文件：

<!-- "single" 文件組件 -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

如果你需要共享樣式、文檔或其他任何內(nèi)容這會(huì)很方便。也非常適合那些因滾動(dòng)而磨損手指的超長組件文件

20. 可重用組件不是你想的那樣

可重用組件不一定是大的或復(fù)雜的東西，我經(jīng)常使小而短的組件可重復(fù)使用。因?yàn)槲也粫?huì)到處重寫這段代碼，更新它變得容易得多，而且我可以確保每個(gè)OverflowMenu看起來和工作完全一樣——因?yàn)樗鼈兪且粯拥模?/p>

<!-- OverflowMenu.vue -->
<template>
  <Menu>
    <!-- 添加自定義按鈕來觸發(fā)我們的菜單 -->
    <template #button v-slot="bind">
      <!-- 使用 bind 傳遞點(diǎn)擊處理程序、a11y 屬性等。 -->
      <Button v-bind="bind">
        <!-- 使用我們自己的“...”圖標(biāo)，此按鈕沒有文字 -->
        <template #icon>
          <svg src="./ellipsis.svg" />
        </template>
      </Button>
    </template>
  </Menu>
</template>

這里我們使用了一個(gè)Menu組件，但是在觸發(fā)它打開的按鈕上添加了一個(gè)“...”（省略號(hào)）圖標(biāo)?？赡懿⒉徊恢档糜盟鼇碇谱骺芍赜玫慕M件，因?yàn)樗挥袔仔?。每次我們想使用Menu這樣的時(shí)候，我們不能只添加圖標(biāo)嗎？但這OverflowMenu將使用數(shù)十次，現(xiàn)在如果我們想要更新圖標(biāo)或其行為，我們可以很容易地做到。而且使用起來也簡單多了！

<template>
  <OverflowMenu
    :menu-items="items"
    @click="handleMenuClick"
  />
</template>

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

你可以通過給它一個(gè)從組件外部調(diào)用方法ref：

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

 
// Parent.vue 中的某個(gè)地方
this.$refs.child.method();

通常，我們使用道具和事件在組件之間進(jìn)行通信。道具被發(fā)送到子組件，事件被發(fā)送回父組件。

<template>
  <ChildComponent
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>

但有時(shí)你可能會(huì)遇到需要父組件觸發(fā)子組件中的方法的情況。這是只有向下傳遞道具不起作用的地方。

可以向下傳遞一個(gè)布爾值并讓子組件監(jiān)視它：

<!-- Parent.vue -->
<template>
  <ChildComponent :trigger="shouldCallMethod" />
</template>

// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // 當(dāng)觸發(fā)器設(shè)置為 `true` 時(shí)調(diào)用該方法
        this.method();
      }
    }
  }
}

這工作正常，但僅限于第一次調(diào)用。如果你需要多次觸發(fā)此操作，則必須清理并重置狀態(tài)。然后邏輯看起來像這樣：

Parent 組件傳遞true給triggerprop
Watch被觸發(fā)，Child組件調(diào)用方法
Child 組件發(fā)出一個(gè)事件告訴 Parent 組件該方法已成功觸發(fā)
Parent 組件重置trigger回false，因此我們可以再次執(zhí)行此操作

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

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

// Parent.vue 中的某個(gè)地方
this.$refs.child.method();

我們打破了“props down, events up”規(guī)則，打破了封裝，但它更清晰、更容易理解值得這樣做！

有時(shí)，“最佳”解決方案最終會(huì)成為最差的解決方案。

22. 觀察數(shù)組和對(duì)象

使用觀察者最棘手的部分是有時(shí)候它似乎不能正確觸發(fā)。一般都是因?yàn)槟阍噲D查看一個(gè)數(shù)組或一個(gè)對(duì)象，但沒有設(shè)置deep為true：

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // 使用對(duì)象語法而不僅僅是方法
    colours: {
      // 這將讓 Vue 知道查看數(shù)組內(nèi)部
      deep: true,

      // 我們必須將我們的方法移動(dòng)到處理程序字段
      handler()
        console.log('顏色列表已更改！');
      }
    }
  }
}

使用 Vue 3 的反應(yīng)式 API 看起來像這樣：

watch(
  colours,
  () => {
    console.log('顏色列表已更改！');
  },
  {
    deep: true,
  }
);

如果你想了解更多信息，可以參閱Vue 3和Vue 2的文檔。

23. 與 Vue Router 深度鏈接

你可以在 URL 中存儲(chǔ)（一些）狀態(tài)，允許你直接跳轉(zhuǎn)到頁面上的特定狀態(tài)。

比如你可以加載一個(gè)已選擇日期范圍過濾器的頁面：

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

這對(duì)于用戶可能共享大量鏈接的應(yīng)用程序部分、服務(wù)器呈現(xiàn)的應(yīng)用程序或在兩個(gè)獨(dú)立應(yīng)用程序之間傳遞比常規(guī)鏈接通常提供的信息更多的信息非常有用。

你可以存儲(chǔ)過濾器、搜索值、模式是打開還是關(guān)閉，或者我們滾動(dòng)到的列表中的位置——非常適合無限分頁。

使用vue-router這樣的方式獲取查詢（這也適用于 Nuxt 和 Vuepress 等大多數(shù) Vue 框架）：

const dateRange = this.$route.query.dateRange;

要更改它，我們使用RouterLink組件并更新query：

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

24. 模板標(biāo)簽的另一種用途

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

我喜歡用它來簡化v-if邏輯，有時(shí)v-for也是。

在這個(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)笨拙，一開始并不明顯，一堆這些元素被顯示和隱藏在一起。在更大、更復(fù)雜的組件上，這可能是更糟糕的情況！

但我們可以解決這個(gè)問題。

我們可以使用template標(biāo)簽對(duì)這些元素進(jìn)行分組，并將其提升v-if到template標(biāo)簽本身：\

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

25. 處理錯(cuò)誤（和警告）的更好方法

你可以為 Vue 中的錯(cuò)誤和警告提供自定義處理程序：

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

例如，如果錯(cuò)誤未得到處理，應(yīng)用程序不僅會(huì)崩潰，還可以顯示整頁錯(cuò)誤屏幕并讓用戶刷新或嘗試其他操作。

在 Vue 3 中，錯(cuò)誤處理程序僅適用于模板和觀察程序錯(cuò)誤，但 Vue 2 錯(cuò)誤處理程序幾乎可以捕獲所有內(nèi)容。兩個(gè)版本中的警告處理程序僅適用于開發(fā)。

到此這篇關(guān)于一定要知道的 25 個(gè) Vue 技巧的文章就介紹到這了,更多相關(guān)Vue 技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: