行业资讯 2025年08月6日
0 收藏 0 点赞 518 浏览 3753 个字
摘要 :

文章目录 1. 在不失去反应性的情况下解构属性 2. 创建自定义指令 3. 针对Vue的性能标记 4. 从组件外部调用方法 5. 持久化Pinia 存储 总结 本文我们将研究五个实用的 Vu……




  • 1. 在不失去反应性的情况下解构属性
  • 2. 创建自定义指令
  • 3. 针对Vue的性能标记
  • 4. 从组件外部调用方法
  • 5. 持久化Pinia 存储
  • 总结

本文我们将研究五个实用的 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-ifv-htmlv-onv-bindv-prev-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.jsmain.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进行开发。

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/8967.html

管理员

相关推荐
2025-08-06

文章目录 一、Reader 接口概述 1.1 什么是 Reader 接口? 1.2 Reader 与 InputStream 的区别 1.3 …

988
2025-08-06

文章目录 一、事件溯源 (一)核心概念 (二)Kafka与Golang的优势 (三)完整代码实现 二、命令…

465
2025-08-06

文章目录 一、证明GC期间执行native函数的线程仍在运行 二、native线程操作Java对象的影响及处理方…

348
2025-08-06

文章目录 一、事务基础概念 二、MyBatis事务管理机制 (一)JDBC原生事务管理(JdbcTransaction)…

456
2025-08-06

文章目录 一、SnowFlake算法核心原理 二、SnowFlake算法工作流程详解 三、SnowFlake算法的Java代码…

517
2025-08-06

文章目录 一、本地Jar包的加载操作 二、本地Class的加载方法 三、远程Jar包的加载方式 你知道Groo…

832
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号