七個讓我們成為更好 Vue 開發者的技巧
我使用 Vue 已經很多年了，特別是去年一直在使用 Vue3，因此，學到了很多東西。
1、腳本設置
如果以前使用過組合 API，我們需要始終執行 defineComponent 和 setup() {}：
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: 'Test',
setup() {
//Add business logic
}
})
</script>
對每個組件執行此操作可能會相當麻煩，實際上，可以避免對組件進行引導。可以使用 <script setup> ，它是如上所示執行相同操作的簡寫。它基本上只是頂部的語法糖，因此，不必每次都進行手動引導：使用 <script setup>，您的組件將被簡化為：
<script lang="ts" setup>
//Add business logic
</script>
2、如何覆蓋反應對象
默認情況下，當定義一個響應式對象時，您不能覆蓋整個對象，如果這樣做，您將失去響應性。
<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 以了解其實際效果：https://codesandbox.io/s/lingering-http-ryf2bj?file=/src/components/HelloWorld.vue
3、反應式 CSS
在新版本的 Vue 中，一件非常棒的事情是，可以將 CSS 直接綁定到我們的變量中。我發現這對于我在去年構建的一些應用程序非常有用。
..
const color = ref('#f000');<style>
.text {
color: v-bind(color);
}
</style>
4、全局組件
時不時地，我們希望擁有全局可用的組件，而不是每次需要它們時都必須導入它們。
我們可以通過轉到 main.ts 并執行以下操作輕松完成此操作：
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");
現在，我們應該能夠通過在要使用全局組件的組件中的模板中編寫 <MyGlobalSection /> 來全局使用該組件
5、組合 API 優于選項 API
使用 Vue 3，我們獲得了 Composition API。這是對 Vue 的一個真正偉大的補充，我認為總是選擇使用 Composition API 而不是 Options API。
我喜歡 Composition API 的一點是，我發現它使用起來更靈活，而且我開始使用 composeables，它被認為是 mixins 的替代品。非常強大且非常酷的補充。
6、使用 v-once 或 v-memo 提高性能
如果你關心快速渲染，可能希望使用 Vue 的內置指令之一，例如 v-once 或 v-memo 來提高應用程序的渲染性能。
v-once，可以在多個元素中應用 v-once，例如常規元素、循環中或組件。
<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；簡而言之，v-memo 用于記憶模板的子樹，這意味著它存儲先前渲染的結果以加快未來渲染的速度。
v-memo 指令可用于元素和組件，并且可以。v-memo 接受一個數組，并且只有當數組中的一個值發生變化時才會重新渲染。
<div v-memo="[valueA, valueB]">
</div>
如果 valueA 或 valueB 發生變化，它將更新。但請注意，v-memo 在 v-for 循環中不起作用。
7、組件的異步加載
為了讓你的應用程序更高效并最小化你的主包，延遲加載你的組件是個好主意。在 Vue3 中，我們可以使用 defineAsyncComponent 來延遲加載組件。
這意味著該組件僅在需要時才加載。使用這種技術，您可以顯著改善應用程序的負載。
定義異步組件的最簡單方法可以像這樣完成：
import { defineAsyncComponent } from "vue";
// Lazy Load
const myComponent = defineAsyncComponent(() =>
import("./components/myComponent.vue")
);
但是，如果您需要它，您可以做更多的事情，將對象傳遞給 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 */,
});
