在這篇文章中,我們將探討五個實用的 Vue 技巧,這些技巧可以使你日常使用 Vue 編程更高效、更富有成效。無論你是Vue的初學者還是經驗豐富的開發者,這些技巧都能幫助你編寫更清晰、更簡潔、更有效的代碼。那麼,讓我們開始吧。
1. 在不失去反應性的情況下解構屬性
在 Vue 中,Props
是父子組件之間傳遞數據的強大方式。Prop 數據是響應性的,這意味着在父組件中對道具值的更改將反映在接收 Prop 的子組件中。然而,子組件不能直接修改 Prop 的值。相反,它應該發出一個事件來通知父組件更新 Prop。
在解構 Vue 的props時,prop數據在過程中會失去反應性。然而,有一種方法可以在解構props時保持反應性。你可以使用toRefs指令來包裝props對象,並在解構過程中保持反應性。有了這個指令,你可以在不擔心失去反應性的情況下解構prop數據。
<script setup lang="ts">
import { toRefs } from 'vue'
const props = withDefaults(
defineProps<{
event: object;
address: string;
}>(),
{}
);
const { address } = toRefs(props)
</script>
<template>
<div class="font-medium bg-gray-100 text-gray-700 py-3 px-3 rounded">
{{ address }}
</div>
</template>
2. 創建自定義指令
Vue 指令是可以添加到HTML元素的特殊屬性,它們讓你能夠將動態數據和行爲綁定到元素上。在Vue.js中,指令通過屬性名上的 v-
前綴來識別,並用於爲HTML元素提供額外的功能。
一些最常用的 vue 指令包括:v-if
,v-html
,v-on
,v-bind
,v-pre
,v-once
等等。在vuejs中,你可以創建自定義指令來執行特定的任務。我們將創建一個自定義的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>
<template>
<input type="text" v-model.capitalize="value" />
</template>
指令是 Vue 中的一個強大功能,它允許你爲應用程序的用戶界面添加動態功能。通過利用指令,我們可以創建更具交互性和響應性的應用程序,這些應用程序更易於維護和更新。
3. 針對Vue的性能標記
在應用程序中追蹤性能瓶頸非常重要,尤其是當你想要構建高性能的應用程序時。Vue 有一個特定的功能,可以在Chrome DevTools中啓用性能標記。
要在開發模式中啓用性能標記,可以將 performance
選項設置爲 true。這樣我們能夠在瀏覽器開發工具的性能/時間線面板中追蹤組件的初始化、編譯、渲染和性能追蹤。
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");
唯一的注意事項是,它只能在開發模式下以及支持性能標記API的瀏覽器中運行
4. 從組件外部調用方法
在Vue 中,我們可以藉助 defineExpose
宏從特定組件外部調用方法。這在處理某種方式上相互依賴的多個組件時特別有用。
defineExpose
宏可以暴露出組件屬性,這些屬性可以在其他組件中通過refs
進行訪問,從而允許你在特定組件中調用方法。這也可以讓你訪問變量聲明,props 等等。
<script setup lang="ts">
function doSomething(){
// do smething
}
defineExpose({ doSomething });
</script>
<div>
<h1>Child component</h1>
</div>
現在我們可以在任何地方導入該組件,並按照下面的示例調用其中的各種方法。
<script setup lang="ts">
import { ref, onMounted} from 'vue';
import ChildComponent from './ChildComponent';
const childComponent = ref();
onMounted(() => {
childComponent.value.doSomething();
});
</script>
<div id="app">
<ChildComponent ref="childComponent" />
</div>
5. 持久化Pinia 存儲
Pinia,是 Vue3 推薦的 store ,Pinia 簡化了 store實現,並且輕量級且具有性能優勢。使用 Pinia 管理 store時,持久化 store 數據非常重要。
pinia-plugin-persistedstate 是一個高度可定製的包,爲這項任務提供自定義存儲、序列化器和路徑選擇選項。
請使用您喜歡的包管理器按照下面的方式安裝 pinia-plugin-persistedstate
:
pnpm : pnpm i pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : 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 pinia
pinia.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的技巧可以極大地提升你的開發流程,使你的代碼更高效、更有效。從不失去反應性地解構屬性,到在Pinia中持久化存儲狀態,再到在組件外部訪問組件方法,這些技巧可以幫助你提升你的Vue. 技能。