七個讓我們成為更好 Vue 開發者的技巧

語言: CN / TW / HK

我使用 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 */,
});