我使用 Vue 已經(jīng)很多年了，特別是去年一直在使用 Vue3，因此，學(xué)到了很多東西。

1、腳本設(shè)置

如果以前使用過(guò)組合 API，我們需要始終執(zhí)行 defineComponent 和 setup() {}：

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
 name: 'Test',
 setup() {
   //Add business logic
 }
})
</script>

對(duì)每個(gè)組件執(zhí)行此操作可能會(huì)相當(dāng)麻煩，實(shí)際上，可以避免對(duì)組件進(jìn)行引導(dǎo)。可以使用 <script setup> ，它是如上所示執(zhí)行相同操作的簡(jiǎn)寫(xiě)。它基本上只是頂部的語(yǔ)法糖，因此，不必每次都進(jìn)行手動(dòng)引導(dǎo)：使用 <script setup>，您的組件將被簡(jiǎn)化為：

<script lang="ts" setup>
 //Add business logic
</script>

2、如何覆蓋反應(yīng)對(duì)象

默認(rèn)情況下，當(dāng)定義一個(gè)響應(yīng)式對(duì)象時(shí)，您不能覆蓋整個(gè)對(duì)象，如果這樣做，您將失去響應(yīng)性。

<script lang="ts">
import { defineComponent, reactive, onMounted } from "vue";
export default defineComponent({
 name: "HelloWorld",
 setup() {
   let myReactiveObject = reactive({
     name: "Nicky",
     age: "37",
     country: "DK",
   });
   let newObject = {
     name: "Nicky Christensen",
     age: "36",
     country: "DA-DK",
   };
   onMounted(() => {
     setTimeout(() => {
       //myReactiveObject = newObject //Wont work
       Object.assign(myReactiveObject, newObject) //Will work
     }, 2000)
   })
   return {
     myReactiveObject,
   };
 },
});
</script>

查看此 Codesandbox 以了解其實(shí)際效果：https://codesandbox.io/s/lingering-http-ryf2bj?file=/src/components/HelloWorld.vue

3、反應(yīng)式 CSS

在新版本的 Vue 中，一件非常棒的事情是，可以將 CSS 直接綁定到我們的變量中。我發(fā)現(xiàn)這對(duì)于我在去年構(gòu)建的一些應(yīng)用程序非常有用。

........
const color = ref('#f000');<style>
.text {
  color: v-bind(color);  
}
</style>

4、全局組件

時(shí)不時(shí)地，我們希望擁有全局可用的組件，而不是每次需要它們時(shí)都必須導(dǎo)入它們。

我們可以通過(guò)轉(zhuǎn)到 main.ts 并執(zhí)行以下操作輕松完成此操作：

import App from "./App.vue";
import MyGlobalSection from '@/components/MyGlobalSection.vue';
const app = createApp(App);
// Make our <MyGlobalSection /> component globally available.
app.component(MyGlobalSection.name, MyGlobalSection);
app.mount("#app");

現(xiàn)在，我們應(yīng)該能夠通過(guò)在要使用全局組件的組件中的模板中編寫(xiě) <MyGlobalSection /> 來(lái)全局使用該組件

5、組合 API 優(yōu)于選項(xiàng) API

使用 Vue 3，我們獲得了 Composition API。這是對(duì) Vue 的一個(gè)真正偉大的補(bǔ)充，我認(rèn)為總是選擇使用 Composition API 而不是 Options API。

我喜歡 Composition API 的一點(diǎn)是，我發(fā)現(xiàn)它使用起來(lái)更靈活，而且我開(kāi)始使用 composeables，它被認(rèn)為是 mixins 的替代品。非常強(qiáng)大且非?？岬难a(bǔ)充。

6、使用 v-once 或 v-memo 提高性能

如果你關(guān)心快速渲染，可能希望使用 Vue 的內(nèi)置指令之一，例如 v-once 或 v-memo 來(lái)提高應(yīng)用程序的渲染性能。

v-once，可以在多個(gè)元素中應(yīng)用 v-once，例如常規(guī)元素、循環(huán)中或組件。

<template>
 <!-- single -->
 <p v-once>{{ someProperty }}</p>
 <!-- with children -->
 <div v-once>
   <p>{{ someProperty}}</p>
 </div>
 <!-- components -->
 <my-component v-once />
 <!-- v-for directives -->
 <li v-for="”item" in items” v-once>{{item}}</li>
</template>

v-memo；簡(jiǎn)而言之，v-memo 用于記憶模板的子樹(shù)，這意味著它存儲(chǔ)先前渲染的結(jié)果以加快未來(lái)渲染的速度。  

v-memo 指令可用于元素和組件，并且可以。v-memo 接受一個(gè)數(shù)組，并且只有當(dāng)數(shù)組中的一個(gè)值發(fā)生變化時(shí)才會(huì)重新渲染。

<div v-memo="[valueA, valueB]">
 ...
</div>

如果 valueA 或 valueB 發(fā)生變化，它將更新。但請(qǐng)注意，v-memo 在 v-for 循環(huán)中不起作用。

7、組件的異步加載

為了讓你的應(yīng)用程序更高效并最小化你的主包，延遲加載你的組件是個(gè)好主意。在 Vue3 中，我們可以使用 defineAsyncComponent 來(lái)延遲加載組件。  

這意味著該組件僅在需要時(shí)才加載。使用這種技術(shù)，您可以顯著改善應(yīng)用程序的負(fù)載。

定義異步組件的最簡(jiǎn)單方法可以像這樣完成：

import { defineAsyncComponent } from "vue";
// Lazy Load
const myComponent = defineAsyncComponent(() =>
 import("./components/myComponent.vue")
);

但是，如果您需要它，您可以做更多的事情，將對(duì)象傳遞給 defineAsyncComponent：

const myComponent = defineAsyncComponent({
 loader: () => import("./myComponent.vue"),
 loadingComponent: myLoadingComponent /* shows while loading */,
 errorComponent: myErrorComponent /* shows if there's an error */,
 delay: 1000 /* delay in ms before showing loading component */,
 timeout: 3000 /* timeout after this many ms */,
});