5个实用的 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>

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. 技能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/40415.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

9.1 C++ STL 排序、算数与集合

C STL&#xff08;Standard Template Library&#xff09;是C标准库中的一个重要组成部分&#xff0c;提供了丰富的模板函数和容器&#xff0c;用于处理各种数据结构和算法。在STL中&#xff0c;排序、算数和集合算法是常用的功能&#xff0c;可以帮助我们对数据进行排序、统计…

【JVM】JVM中的分代回收

文章目录 分代收集算法什么是分代分代收集算法-工作机制MinorGC、 Mixed GC 、 FullGC的区别是什么 分代收集算法 什么是分代 在java8时&#xff0c;堆被分为了两份&#xff1a; 新生代和老年代【1&#xff1a;2】 其中&#xff1a; 对于新生代&#xff0c;内部又被分为了三…

eclipse常用设置

1、调整编辑页面字体大小 窗口 (Window)- 首选项&#xff08;Preferences&#xff09;- 常规&#xff08;General&#xff09;- 外观 (Appearence)- 颜色与字体 (Colors And Fonts)&#xff0c;在右边的对话框里选择 Java - Java Editor Text Font&#xff0c;点击出现的修改&…

【ARM 嵌入式 编译系列 3.3 -- gcc 动态库与静态库的链接方法介绍】

文章目录 1.1 GCC 链接器 LD 介绍1.1.1 GCC 链接器 LD 常用参数介绍1.2 动态库和静态库介绍1.2.1 动态库和静态库优缺点1.2.2 库文件链接方式1.2.3 ldd 工具介绍1.2.4 静态库链接时搜索路径顺序1.2.5 动态库链接时、执行时搜索路径顺序1.2.6 头文件搜索路径1.2.7 有关环境变量上…

Neo4j之Aggregation基础

在 Neo4j 中&#xff0c;聚合&#xff08;Aggregation&#xff09;是对数据进行计算、汇总和统计的过程。以下是一些使用聚合函数的常见例子&#xff0c;以及它们的解释&#xff1a; 计算节点数量&#xff1a; MATCH (p:Person) RETURN count(p) AS totalPersons;这个查询会计…

Socks5代理在多线程爬虫中的应用

在进行爬虫开发过程中&#xff0c;我们常常需要处理大量的数据&#xff0c;并执行多任务并发操作。然而&#xff0c;频繁的请求可能会引起目标网站的反爬机制&#xff0c;导致IP封禁或限制访问。为了规避这些限制&#xff0c;我们可以借助Socks5代理的强大功能&#xff0c;通过…

Nginx反向代理技巧

跨域 作为一个前端开发者来说不可避免的问题就是跨域&#xff0c;那什么是跨域呢&#xff1f; 跨域&#xff1a;指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&#xff0c;是浏览器对javascript施加的安全限制。浏览器的同源策略是指协议&#xff0c;域名…

2011-2021年数字普惠金融指数Bartik工具变量法(含原始数据和Bartik工具变量法代码)

2011-2021年数字普惠金融指数Bartik工具变量法&#xff08;含原始数据和Bartik工具变量法代码&#xff09; 1、时间&#xff1a;2011-2020&#xff08;省级、城市&#xff09;&#xff0c;2014-2020&#xff08;区县&#xff09; 2、原始数据来源&#xff1a;北大金融研究中心…

npm的镜像源和代理的查看和修改

一、镜像源 查询当前镜像源 npm get registry 设置为淘宝镜像 npm config set registry http://registry.npm.taobao.org/ 设置回默认的官方镜像 npm config set registry https://registry.npmjs.org/ 设置electron为淘宝镜像 npm config set ELECTRON_MIRROR "h…

Redis对象类型和结构、内存回收、对象共享

对象类型和结构 在Redis中&#xff0c;无论是键key还是值value都是一个对象&#xff0c;每次对Redis数据库创建一个新的键值对时&#xff0c;就至少会创建两个对象。 常见的对象类型有&#xff1a; 字符串列表哈希集合有序集合 这些对象在Redis中统一用一个结构体redisObjec…

VS2019生成的DLL,给QT(MinGW版本)使用的小结

VS2019端&#xff1a; a 基于生成一个DLL的工程&#xff08;要注意生成是x86&#xff0c;还是x64的&#xff0c;需要和后面的QT的App工程对应&#xff09;&#xff0c;这里不多解释了&#xff0c;网上多的是&#xff1b; b 在cpp实现文件里&#xff0c;假如要导出一个这样的…

Git如何上传文件到github

Git下载网址&#xff1a; https://git-scm.com/downloads 1. 新建一个空文件夹&#xff0c;用来上传文件&#xff0c;第一次需创建&#xff0c;以后无需创建 2. 点进去空文件夹&#xff0c;鼠标右键&#xff0c;使用Git Bash Here 打开 3. 克隆远程仓库&#xff1a;git cl…

深入理解JVM——垃圾回收与内存分配机制详细讲解

所谓垃圾回收&#xff0c;也就是要回收已经“死了”的对象。 那我们如何判断哪些对象“存活”&#xff0c;哪些已经“死去”呢&#xff1f; 一、判断对象已死 1、引用计数算法 给对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器就加一&…

解决git reset --soft HEAD^撤销commit时报错

今天在使用git回退功能的时候&#xff0c;遇到以下错误&#xff1a; 解决git reset --soft HEAD^撤销commit时报错 问题&#xff1a; 在进行完commit后&#xff0c;想要撤销该commit&#xff0c;于是使用了git reset --soft HEAD^命令&#xff0c;但是出现如下报错&#xff1…

【学习心得】安装cuda/cudann和pytorch

一、查看驱动信息 # 进入CMD输入命令 nvidia-smi 也可以右下角图标打开NVIDIA 设置进行查看 二、下载安装CUDA 1、下载 下载地址 https://developer.nvidia.com/ 2、安装 推荐自定义安装。建议只勾选Cuda&#xff0c;只安装这一个就好&#xff0c;以免报错安装失败。 3、验证…

移动端直播相关技术总结

一、直播APP原理 二、直播APP架构 三、直播APP实现流程 四、流媒体开发 流媒体模块架构 流媒体相关基础知识 帧&#xff1a;每一帧代表一幅静止的图像 GOP&#xff1a;Group of Pictures&#xff0c;画面组&#xff0c;一个GOP就是一组连续的画面&#xff0c;很多帧的集合 码率…

BC136 KiKi去重整数并排序

给定一个整数序列&#xff0c;KiKi想把其中的重复的整数去掉&#xff0c;并将去重后的序列从小到大排序输出。 输入描述 第一行&#xff0c;输入一个整数n&#xff0c;表示序列有n个整数。 第二行输入n个整数&#xff08;每个整数大于等于1&#xff0c;小于等于1000&#xf…

nodejs与前端js大文件、切片、视频流相关技术示例

nodejs服务代码 const express require("express"); const fs require("fs");const app express(); // 展示html页面 app.get("/", function (req, res) {res.sendFile(__dirname "/index.html"); });// nodejs切片读取文件示例 …

redis-配置详解(基础篇)

# 可以配置包含其他redis配置&#xff0c;可以使得配置更清晰化 # include /path/to/local.conf ################################## MODULES ##################################### # Load modules at startup. If the server is not able to load modules # it will abor…

拉丁方设计资料的方差分析(SPSS版+SAS版)

拉丁方设计&#xff08;Latin square design&#xff09;&#xff1a;实验研究中涉及一个处理因素和两个控制因素&#xff0c;每个因素的类别数或水平数相等&#xff0c;此时可采用拉丁方设计&#xff0c;将两个控制因素分别安排在拉丁方设计的行和列上。该设计类型仍为单因素方…