在這篇文章中，我們將探討五個實用的 Vue 技巧，這些技巧可以使你日常使用 Vue 編程更高效、更富有成效。無論你是Vue的初學者還是經驗豐富的開發(fā)者，這些技巧都能幫助你編寫更清晰、更簡潔、更有效的代碼。那么，讓我們開始吧。

1. 在不失去反應性的情況下解構屬性

在 Vue 中，Props是父子組件之間傳遞數(shù)據的強大方式。Prop 數(shù)據是響應性的，這意味著在父組件中對道具值的更改將反映在接收 Prop 的子組件中。然而，子組件不能直接修改 Prop 的值。相反，它應該發(fā)出一個事件來通知父組件更新 Prop。

(資料圖)

在解構 Vue 的props時，prop數(shù)據在過程中會失去反應性。然而，有一種方法可以在解構props時保持反應性。你可以使用toRefs指令來包裝props對象，并在解構過程中保持反應性。有了這個指令，你可以在不擔心失去反應性的情況下解構prop數(shù)據。

<script setup lang="ts">import { toRefs } from "vue"const props = withDefaults(  defineProps<{    event: object;    address: string;  }>(),  {});const { address } = toRefs(props)</script>

2. 創(chuàng)建自定義指令

Vue 指令是可以添加到HTML元素的特殊屬性，它們讓你能夠將動態(tài)數(shù)據和行為綁定到元素上。在Vue.js中，指令通過屬性名上的v-前綴來識別，并用于為HTML元素提供額外的功能。

一些最常用的 vue 指令包括：v-if，v-html，v-on，v-bind，v-pre，v-once等等。在vuejs中，你可以創(chuàng)建自定義指令來執(zhí)行特定的任務。我們將創(chuàng)建一個自定義的v-model指令，用于將輸入標簽中輸入的文本轉化為大寫。

<script setup>  import { ref, vModelText } from "vue"  const value = ref("")  // 為" v-model "指令定義一個名為"capitalize "的自定義修飾符  vModelText.beforeUpdate = function (el, { value, modifiers }) {    // 檢查" v-model "指令中是否存在" capitalize "修飾符    if (value && modifiers.capitalize) {      el.value = el.value.toUpperCase()    }  }</script>

指令是 Vue 中的一個強大功能，它允許你為應用程序的用戶界面添加動態(tài)功能。通過利用指令，我們可以創(chuàng)建更具交互性和響應性的應用程序，這些應用程序更易于維護和更新。

3. 針對Vue的性能標記

在應用程序中追蹤性能瓶頸非常重要，尤其是當你想要構建高性能的應用程序時。Vue 有一個特定的功能，可以在Chrome DevTools中啟用性能標記。

要在開發(fā)模式中啟用性能標記，可以將performance選項設置為 true。這樣我們能夠在瀏覽器開發(fā)工具的性能/時間線面板中追蹤組件的初始化、編譯、渲染和性能追蹤。

import { createApp } from "vue";import App from "./App.vue";import router from "./router";import { createPinia } from "pinia";import piniaPluginPersistedstate from "pinia-plugin-persistedstate";import { createHead } from "unhead";import "./style.css";const pinia = createPinia();createHead();pinia.use(piniaPluginPersistedstate);const app = createApp(App);if (process.env.NODE_ENV === "development") {  app.config.performance = true;}app.use(router);app.use(pinia);app.mount("#app");

唯一的注意事項是，它只能在開發(fā)模式下以及支持性能標記API的瀏覽器中運行

4. 從組件外部調用方法

在Vue 中，我們可以借助defineExpose宏從特定組件外部調用方法。這在處理某種方式上相互依賴的多個組件時特別有用。

defineExpose宏可以暴露出組件屬性，這些屬性可以在其他組件中通過refs進行訪問，從而允許你在特定組件中調用方法。這也可以讓你訪問變量聲明，props 等等。

<script setup lang="ts">  function doSomething(){    // do smething  }  defineExpose({ doSomething });</script>
  
Child component
 

現(xiàn)在我們可以在任何地方導入該組件，并按照下面的示例調用其中的各種方法。

<script setup lang="ts">import { ref, onMounted} from "vue";import ChildComponent from "./ChildComponent";const childComponent = ref();onMounted(() => {  childComponent.value.doSomething();});</script>
  

5. 持久化Pinia 存儲

Pinia，是 Vue3 推薦的 store ，Pinia 簡化了 store實現(xiàn)，并且輕量級且具有性能優(yōu)勢。使用 Pinia 管理 store時，持久化 store 數(shù)據非常重要。

pinia-plugin-persistedstate是一個高度可定制的包，為這項任務提供自定義存儲、序列化器和路徑選擇選項。

請使用您喜歡的包管理器按照下面的方式安裝pinia-plugin-persistedstate:

pnpm : pnpm i pinia-plugin-persistedstatenpm : npm i pinia-plugin-persistedstateyarn : yarn add pinia-plugin-persistedstate

需要在main.js或main.ts文件中進行配置，如下所示。

import { createApp } from "vue";import App from "./App.vue";import router from "./router";import { createPinia } from "pinia";import piniaPluginPersistedstate from "pinia-plugin-persistedstate";import { createHead } from "unhead";import "./style.css";const pinia = createPinia();createHead();// inject piniaPluginPersistedstate to piniapinia.use(piniaPluginPersistedstate);const app = createApp(App);app.use(router);app.use(pinia);app.mount("#app");

通過在您的 store 中將persist屬性設置為true，啟用Pinia存儲持久性:

import { defineStore } from "pinia";export const uselistingStore = defineStore(`listingStore`, {  state: () => {    return {      data: [],    };  },  persist: true,  actions: {  },  getters: {  },});

總結

總的來說，這五個Vue.js的技巧可以極大地提升你的開發(fā)流程，使你的代碼更高效、更有效。從不失去反應性地解構屬性，到在Pinia中持久化存儲狀態(tài)，再到在組件外部訪問組件方法，這些技巧可以幫助你提升你的Vue. 技能。

關鍵詞：