登录
首页 > JAVA > 用这五个技巧将你的Vue技能提升到新的高度

用这五个技巧将你的Vue技能提升到新的高度

发布时间:2023-08-13 19:11:31 发布用户: admin
五个Vue.js的技巧可以极大地提升你的开发流程,使你的代码更高效、更有效。从不失去反应性地解构属性,到在Pinia中持久化存储状态,再到在组件外部访问组件方法,这些技巧可以帮助你提升你的Vue. 技能。

在这篇文章中,我们将探讨五个实用的 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
 

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
 

指令是 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");
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
 

唯一的注意事项是,它只能在开发模式下以及支持性能标记API的浏览器中运行

4. 从组件外部调用方法

在Vue 中,我们可以借助 defineExpose 宏从特定组件外部调用方法。这在处理某种方式上相互依赖的多个组件时特别有用。

defineExpose 宏可以暴露出组件属性,这些属性可以在其他组件中通过refs进行访问,从而允许你在特定组件中调用方法。这也可以让你访问变量声明,props 等等。

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

<div>
  <h1>Child component</h1> 
</div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
 

现在我们可以在任何地方导入该组件,并按照下面的示例调用其中的各种方法。

<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
 

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
  • 1.
  • 2.
  • 3.
 

需要在 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");
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
 

通过在您的 store  中将 persist 属性设置为 true,启用Pinia存储持久性:

import { defineStore } from "pinia";

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

  },
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
 

总结

总的来说,这五个Vue.js的技巧可以极大地提升你的开发流程,使你的代码更高效、更有效。从不失去反应性地解构属性,到在Pinia中持久化存储状态,再到在组件外部访问组件方法,这些技巧可以帮助你提升你的Vue. 技能。

PHP更多>>

海关总署:我国进出口 连续2个月同比增长 长清区成功举办首届职工家政技能大赛 前妻要回土地于法有据 法院公允分割定分止争 G312线傅苦公路5标项目全幅顺利贯通 实现“56到84+”延伸,这个镇的文化中心为更多人群提供公共文化服务! 前11个月进出口持平 11月份同比增长1.2% 中国与新加坡签署中新自由贸易协定进一步升级议定书 凤阳奋力绘就宜居宜业和美乡村新画卷 浙江持续擦亮“一路先行”党建品牌 山东兖州:“一线支部工作法”将党旗插在田间地头 固安县加快推进 空天信息产业发展 王晓涛被开除党籍 濮阳王瑞林获评中国青年志愿者优秀个人 报中共中央批准,两“虎”同时受处分! 国务院:支持上海自贸试验区可信、安全和负责任地使用人工智能技术 把“东方美”传向国际市场!聊城这家小镇企业东盟市占率超70% 交通运输部关于发布《综合货运枢纽设计规范》等18项交通运输行业标准的公告 喜讯 | 贵州三力荣获“2021-2023年贵州省促进新型工业化发展先进企业”称号 内蒙古这起“百万黄金被盗案”,更多细节披露! 交通运输部印发《城市轨道交通通信系统运营技术规范(试行)》 黑龙江省政协原副主席曲敏,被“双开” 中老铁路磨憨口岸出入境人员突破10万人次 甘肃兰州榆中县:设立“零工驿站”提供就业服务 扶余:抢抓战略机遇,推动县域经济高质量发展 【“双争”进行时】霸州:百姓宣讲家乡事 强国复兴攀高峰 “山西一女性公职人员实名举报两任局长”,最新通报 海关总署:11月我国外贸进出口同比增长1.2% (人权行动看中国)河南驻马店:特色种植产业成农民增收好渠道 总投资74亿元!中国铁建中标海南临高金牌港开发区港口及配套工程项目 鼓励大学生基层就业还需多方向着力
Copyright 2018-2023 黑鸟云 版权所有  京ICP备2022032575号-3