章
目
录
本文我们将研究五个实用的 Vue 技巧，这些方法能让你在日常 Vue 编程中更高效、更有成效。不管你是 Vue 的初学者还是经验丰富的开发者，这些诀窍都有助于你编写更为清晰、更简洁、更富有效率的代码。咱们开始吧！
1. 在不失去反应性的情况下解构属性
在 Vue 中，Props 是在父子组件之间传递数据的强大机制。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 等。在 Vue.js 中，你还可以创建自定义指令来执行特定的任务。我们将创建一个自定义的 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-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.js的技能水平，使您能够更加熟练地使用Vue.js进行开发。
