技術文章 » 25個值得了解的Vue小技巧，原來還能這麼用！

25個值得了解的Vue小技巧，原來還能這麼用！

2022-05-20 13:01:37
本篇文章總結整理25個小技巧，學了這麼久才知道還能這麼用，現在分享給大家，希望對大家有所幫助，讓程式設計生活變得更容易！

學習成為一個更好的Vue開發者並不總是關於那些需要花時間和精力才能掌握的大概念。掌握一些技巧和竅門，可以讓我們的程式設計生活變得更容易--沒有大量重複的工作。

在用 Vue 開發的這幾年裡，我學到了很多有用的技巧。有些很取巧，有些幾乎每天都在用，有些則更高階--但它們都很有用。（學習視訊分享：）

1、將一個 prop 限制在一個型別的列表中

使用 prop 定義中的 validator 選項，可以將一個 prop 型別限制在一組特定的值中。

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

這個驗證函數接受一個prop，如果prop有效或無效，則返回true或false。

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

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

2、預設內容和擴充套件點

Vue中的槽可以有預設的內容，這使我們可以製作出更容易使用的元件。

<button class="button" @click="$emit('click')">
  <slot>
    <!-- Used if no slot is provided -->
    Click me
  </slot>
</button>

我最喜歡使用預設槽，就是用它們來建立擴充套件點。

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

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

現在我們可以用許多不同的方式使用這個元件。簡單的、預設的方式，或者自定義的方式。

<!-- Uses default functionality of the component -->
<ButtonWithExtensionPoint text="Formatted text" />

<ButtonWithExtensionPoint>
  <div class="different-formatting">
    Do something a little different here
  </div>
</ButtonWithExtensionPoint>

3、使用引號來監聽巢狀屬性

你可能不知道這一點，我們可以通過使用引號輕鬆地直接監聽巢狀值：

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

4、知道何時使用v-if（以及何時避免使用）

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

<ComplicatedChart v-show="chartEnabled" />

當v-if被開啟或關閉時，它將建立並完全銷燬該元素。相反，v-show將建立該元素並將其留在那裡，通過設定其樣式為display: none來隱藏它。

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

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

5、單個作用域插槽的簡寫(不需要 template 標籤)

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

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

普通寫法：

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

不使用 template:

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

簡單、直截了當，令人讚歎不已。

6、有條件地渲染插槽

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

每個Vue元件都有一個特殊的$slots物件，裡面有你所有的插槽。預設槽的鍵是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>

如果我們只對元件應用一個插槽，那麼只有那個插槽會顯示在我們的$slots物件中。

<template>
  <Slots>
    <template #second>
      This will be applied to the second slot.
    </template>
  </Slots>
</template>
$slots = { second: <vnode> }

我們可以在我們的元件中使用這一點來檢測哪些插槽已經被應用到元件中，例如，通過隱藏插槽的包裝元素。

<template>
  <div>
    <h2>A wrapped slot</h2>
    <div v-if="$slots.default" class="styles">
      <slot />
    </div>
  </div>
</template>

現在，應用樣式的包裝器div只有在我們用某些東西填充這個插槽時才會被渲染。

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

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

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

  • 當使用封裝的div來新增預設樣式時
  • 插槽是空的
  • 如果我們將預設內容與巢狀槽相結合

例如，當我們在新增預設樣式時，我們在插槽周圍新增一個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>

然而，如果父元件沒有將內容應用到該插槽中，我們最終會在頁面上渲染出一個空的div。

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

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

7、如何監聽一個插槽的變化

有時我們需要知道插槽內的內容何時發生了變化。

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

不幸的是，Vue沒有內建的方法讓我們檢測這一點。

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

MutationObserver介面提供了監視對DOM樹所做更改的能力。它被設計為舊的Mutation Events功能的替代品，該功能是DOM3 Events規範的一部分。

export default {
  mounted() {
    // 當有變化時呼叫`update`
    const observer = new MutationObserver(this.update);

    // 監聽此元件的變化
    observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

這個涉及的內容還是很多的，後面會單獨出一篇文章來講，記得關注刷碗智的公眾號 <大遷世界> 哦！

8、將區域性和全域性的 style混合在一起

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

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

不過，如果需要的話，也可以新增一個非作用域樣式塊來新增全域性樣式

<style>
  /* 全域性 */
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /* 在該元件內有效 */
  .component {
    background: green;
  }
</style>

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

9、重寫子元件的樣式--正確的方法

Scoped CSS在保持內容整潔方面非常棒，而且不會將樣式引入應用的其他元件中。

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

Vue有一個 deep 選擇器：

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

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

10、用上下文感知元件創造魔法

**上下文感知元件(context-aware)**是「魔法的」，它們自動適應周圍發生的事情，處理邊緣情況、狀態共用等等。

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

1）狀態共用

當你把一個大的元件分解成多個小的元件時，它們往往仍然需要共用狀態。

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

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

<!-- 為簡單起見，作為一個單一元件使用 -->
<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

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

一個 Popup 或 Tooltip 應該重新定位，以便它不會溢位頁面。但是，如果該元件是在一個modal 內，它應該重新定位，以便它不會溢位 modal。

如果Tooltip知道它是在一個模態裡面，這可以自動完成。

3）樣式

建立了 context-aware的CSS，根據父級或同級元素的情況應用不同的樣式。

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

.statistic + .statistic {
  margin-left: 10px;
}

CSS變數讓我們更進一步，允許我們在一個頁面的不同部分設定不同的值。

11、如何在Vue之外建立一個具有響應性的變數(Vue2和3)

如果你從Vue之外得到一個變數，讓它具有反應性是很好的。

這樣，我們就可以在computed props、watch和其他任何地方使用它，它的工作方式就像Vue中的任何其他狀態一樣。

如果我們使用的選項API，需要的只是將其放在元件的資料部分中：

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 只對物件和陣列起作用
const anotherReactiveVariable = reactive(externalVariable);

// Access directly
console.log(anotherReactiveVariable);

如果你還在使用 Vue2，你可以使用observable而不是reactive來實現完全相同的結果。

12、v-for 中的解構

你知道可以在-vfor中使用解構嗎？

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

當使用一個物件時，可以這樣使用 key：

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

也可以將這兩種方法結合起來，獲取key以及屬性的 index。

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

13、在指定範圍內迴圈

v-for指令允許我們遍歷陣列，但它也允許我們遍歷一個範圍

<template>
  <ul>
    <li v-for="n in 5">Item #{{ n }}</li>
  </ul>
</template>

渲染結果：

Item #1
Item #2
Item #3
Item #4
Item #5

當我們使用帶範圍的v-for時，它將從1開始，以我們指定的數位結束。

14、監聽你的元件中的任何東西

export default {
  computed: {
    someComputedProperty() {
      // Update the computed prop
    },
  },
  watch: {
    someComputedProperty() {
      // Do something when the computed prop is updated
    }
  }
};

我們可以監聽：

  • 計算屬性
  • props
  • 巢狀值

如果你使用組合API，任何值都可以被監視，只要它是一個ref或reactive物件。

15、竊取 prop 型別

我從一個子元件中複製 prop 型別，只是為了在一個父元件中使用它們。但我發現，偷取這些 prop 型別要比僅僅複製它們好得多。

例如，我們在這個元件中使用了一個Icon元件。

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

為了讓它工作，我們需要新增正確的 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 名稱的開頭。所以我們必須做一些額外的工作來實現這一點。

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,
    },
  },
};

現在，如果Icon元件中的 prop 型別被修改，我們的元件將保持最新狀態。

但是，如果一個 prop 型別從 Icon 元件中被新增或刪除了呢？為了應對這些情況，我們可以使用v-bind和一個計算的 prop 來保持動態。

16、檢測元素外部(或內部)的單擊

有時我需要檢測一個點選是發生在一個特定元素el的內部還是外部。這就是我通常使用的方法。

window.addEventListener('mousedown', e => {
  // 獲取被點選的元素
  const clickedEl = e.target;
  
  if (el.contains(clickedEl)) {
   //在 "el "裡面點選了
  } else {
   //在 "el "外點選了
  }
});

17、遞迴插槽

有一次，我決定看看我是否可以只用模板來做一個v-for元件。在這個過程中，我也發現瞭如何遞迴地使用槽。

<!-- VFor.vue -->
<template>
    <div>
        <!--  渲染第一項 -->
    {{ list[0] }}
        <!-- 如果我們有更多的專案，繼續!但是不要使用我們剛剛渲染的項 -->
    <v-for
      v-if="list.length > 1"
            :list="list.slice(1)"
        />
    </div>
</template>

如果你想用作用域插槽來做這件事，只是需要一些調整

<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>
    <!-- 常規列表 -->
    <v-for :list="list" />

    <!-- 加粗的專案列表 -->
    <v-for :list="list">
      <template v-slot="{ item }">
        <strong>{{ item }}</strong>
      </template>
    </v-for>
  </div>
</template>

18、元件後設資料

並不是新增到一個元件的每一點資訊都是狀態。有時我們需要新增一些後設資料，給其他元件提供更多資訊。

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

1.png

如果你想讓佈局知道每個小元件應該佔多少列，你可以直接在元件上新增後設資料。

export default {
  name: 'LiveUsersWidget',
  // ? 只需將其作為一個額外的屬性新增
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};
export default {
  name: 'LiveUsersWidget',
  // ?  只需將其作為一個額外的屬性新增
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

你會發現這個後設資料是元件上的一個屬性。

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

我們也可以通過特殊的$options屬性從元件內部存取後設資料。

export default {
  name: 'LiveUsersWidget',
  columns: 3,
  created() {
    // ? `$options` contains all the metadata for a component
    console.log(`Using ${this.$options.metadata} columns`);
  },
};

只要記住，這個後設資料對元件的每個範例都是一樣的，而且不是響應式的。

這方面的其他用途包括（但不限於）：

  • 保持單個元件的版本號
  • 用於構建工具的自定義標誌，以區別對待元件
  • 在計算屬性、資料、watch 等之外為元件新增自定義功能
  • 其它

19、多檔案單檔案元件

這是**SFC(單檔案元件)**的一點已知功能。

可以像常規HTML檔案一樣匯入檔案：

<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

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

20、可重複使用的元件並不是你所想的那樣

可重複使用的元件不一定是大的或複雜的東西。

我經常讓小的和短的元件可以重複使用。

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

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

在這裡，我們採用了一個選單元件，但在觸發它的按鈕上新增了一個 ellipsis 圖示。(省略號)的圖示來觸發它的開啟。

這似乎不值得把它做成一個可重複使用的元件，因為它只有幾行。難道我們就不能在每次要使用這樣的選單時新增圖示嗎？

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

21、從元件外部呼叫一個方法

我們可以從一個元件的外部通過給它一個 ref 用來呼叫一個方法。

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>
// Somewhere in Parent.vue
this.$refs.child.method();

再解釋一下這個問題。

有時候，「最佳實踐」並不適用於你正在做的事情，你需要一個像這樣的逃生口。

通常情況下，我們使用 props 和 events 在元件之間進行交流。props 被下發到子元件中，而events 被上發到父元件中。

<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();
      }
    }
  }
}

這可以正常工作，但只能在第一次呼叫時使用。如果您需要多次觸發此操作，則必須進行清理並重置狀態。邏輯是這樣的

  • 父元件將 true 傳遞給觸發器 prop
  • Watch 被觸發，然後 Child 元件呼叫該方法
  • 子元件發出一個事件，告訴父元件該方法已被成功觸發
  • Parent元件將 trigger 重置為 false，所以我們可以從頭再來一次

相反，如果我們在子元件上設定一個 ref，我們可以直接呼叫該方法:

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>
// Somewhere in Parent.vue
this.$refs.child.method();

是的，我們打破了 「props down, events up"」 的規則，我們打破了封裝，但是這樣做更清晰，更容易理解，所以是值得的

有時，"最好的 "解決方案最終會成為最糟糕的解決方案。

22、監聽陣列和物件

使用 watcher 最棘手的部分是，有時它似乎不能正確觸發。

通常，這是因為我們試圖監聽陣列或物件，但沒有將deep設定為true

export default {
  name: 'ColourChange',
  props: {
    colours: {
      type: Array,
      required: true,
    },
  },
  watch: {
    // 使用物件語法，而不僅僅是方法
    colours: {
      // 這將讓Vue知道要在陣列內部尋找
      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中儲存（一點）狀態，允許我們直接跳到頁面上的一個特定狀態。

例如，你載入一個已經選擇了日期範圍過濾器的頁面：

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

這對於應用中使用者可能共用大量連結的部分來說是非常棒的，對於伺服器渲染的應用，或者在兩個獨立的應用之間通訊的資訊比普通連結通常提供的更多。

我們可以儲存過濾器、搜尋值、模態框是開啟還是關閉，或者在列表的哪個位置捲動以完美地實現無限分頁。

使用 vue-router 獲取查詢引數是這樣工作的(這也適用於大多數Vue框架，如Nuxt和Vuepress)：

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

為了改變它，我們使用 RouterLink 元件並更新 query。

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

24、template 標籤的另一個用途

template 標籤可以在模板中的任何地方使用，以更好地組織程式碼。

我喜歡用它來簡化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>

這有點笨拙，而且一開始並不明顯，一堆這樣的元素被顯示和隱藏在一起。在一個更大、更復雜的元件上，這可能是一個更糟糕的情況

但我們能優化它。

我們可以使用 template 標籤來分組這些元素，並將 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>

現在看起來就更容易理解，而且它在做什麼，一目瞭然。

25、處理錯誤（和警告）的更好方法

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

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

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};

像 Bugsnag 和 Rollbar 這樣的錯誤跟蹤服務，可以鉤住這些處理程式來記錄錯誤，但你也可以用它們來更優雅地處理錯誤，以獲得更好的使用者體驗。

例如，如果一個錯誤未被處理，應用程式不會直接崩潰，你可以顯示一個完整的錯誤螢幕，讓使用者重新整理或嘗試其他東西。

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

（學習視訊分享：、）

以上就是25個值得了解的Vue小技巧，原來還能這麼用！的詳細內容，更多請關注TW511.COM其它相關文章！