注意!Vue.js 或 Nuxt.js 中请停止使用.value

 

图片

大家好,我是CodeQi! 一位热衷于技术分享的码仔。

当您在代码中使用.value时,必须每次都检查变量是否存在并且是引用。

这可能很麻烦,因为在运行时使用.value可能会导致错误。然而,有一个简单的解决方法,即使用unref()而不是.value

unref()会检查变量是否是引用,并自动提供值,即使变量不是引用也不会引发错误。

下面是使用unref()的示例:

// 使用 .value 方式const v = a.value || A;
// 使用 unref 方式const v = unref(a);

首先,您不需要在每个变量上都使用ref()

以下是不需要使用ref()的示例:

<template>  <ul class="navbar-nav">    <li      class="nav-item"      v-for="listPage in listingPages"      :key="listPage.name"    >      <NuxtLink        class="nav-link"        :to="listPage.link"        :class="{ active: $route.path.indexOf(listPage.link) !== -1 }"        :aria-current="          $route.path.indexOf(listPage.link) !== -1 ? 'page' : null        "      >        {{ listPage.name }}      </NuxtLink>    </li>  </ul></template>
<script setup>const listingPages = [  { name: "Posts", link: "/list/posts" },  { name: "Authors", link: "/list/authors" },  { name: "Tags", link: "/list/tags" },];</script>

上述示例是一个 Nuxt 3 项目的代码片段。listingPages变量列出了在导航栏中作为链接显示的页面。

由于这些变量的值是静态的,并且链接引用了对应路径上存在的静态 Vue 文件,即 URL 路径/lists/posts代表路径  /pages/lists/posts.vue中项目下的静态文件,因此这些变量的值永远不会改变。因此,可以将这些变量排除在ref()声明之外。

还有其他类似情况的变量,它们的值在服务器端或客户端端上永远不会改变,就像上述示例一样,它们可以在声明时排除ref()

同时,完全忘记使用ref()也是不好的。只选择那些需要响应性的变量,或者值在保持相同路径时可能发生变化的变量(例如,对于 Nuxt.js,我指的是不包括查询字符串的路径,请注意)。

我已经测试过,如果您不使用引用来使用页面查询值,对于具有分页功能的页面(?page=1),即使在 URL 栏中的值发生变化,它也永远不会更新。


祝你编码愉快!Happy coding!

关注我,原创文章第一时间推送, 点赞和收藏就是最大的支持❤️

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

力扣61. 旋转链表(java)

思路&#xff1a;用快慢指针找到最后链表k个需要移动的节点&#xff0c;然后中间断开节点&#xff0c;原尾节点连接原头节点&#xff0c;返回新的节点即可&#xff1b; 但因为k可能比节点数大&#xff0c;所以需要先统计节点个数&#xff0c;再取模&#xff0c;看看k到底需要移…

【Linux系统编程】深入剖析:四大IO模型机制与应用(阻塞、非阻塞、多路复用、信号驱动IO 全解读)

目录 概述&#xff1a; 1. 阻塞IO (Blocking IO) 2. 非阻塞IO (Non-blocking IO) 3. IO多路复用 (I/O Multiplexing) 4. 信号驱动IO (Signal-driven IO) 阻塞式IO 非阻塞式IO 信号驱动IO&#xff08;Signal-driven IO&#xff09; 信号IO实例&#xff1a; IO多路复用…

2024企业加密软件丨为什么企业需要防泄密

企业为什么需要防泄密&#xff1f; 企业的数据中包含了许多核心机密&#xff0c;如研发成果、商业计划、客户资料等。这些信息的泄露可能使竞争对手获得不正当的优势&#xff0c;给企业带来严重损失。 数据泄露事件往往会对企业的声誉造成负面影响&#xff0c;降低客户信任度…

【ROS2】Ubuntu 24.04 源码编译安装 Jazzy Jalisco

目录 系统要求 系统设置 设置区域启用所需的存储库安装开发工具 构建 ROS 2 获取 ROS 2 代码使用 rosdep 安装依赖项安装额外的 RMW 实现&#xff08;可选&#xff09;在工作区构建代码 设置环境 尝试一些例子 下一步 备用编译器 Clang保持最新状态 故障排除 卸载 系统要求 当前…

RRStudio 下载及安装(详尽版)

R语言来自S语言&#xff0c;是S语言的一个变种。S语言、C语言、Unix系统都是贝尔实验室的研究成果。R 语言是一种解释型的面向数学理论研究工作者的语言&#xff0c;主要用于统计分析、绘图、数据挖掘。 R 语言自由软件&#xff0c;免费、开放源代码&#xff0c;支持各个主要计…

python实现windows非白名单exe监控并杀死

目录 一、限定死白名单 二、增加自定义白名单文件 需求&#xff1a;孩子在家用电脑上网课&#xff0c;总是悄悄打开游戏或视频软件 方案&#xff1a;指定白名单exe&#xff0c;打开非白名单的就自动被杀死&#xff0c;并记录日志供查看 一、限定死白名单 import psutil imp…

【C语言】continue 关键字

当在C语言中使用continue关键字时&#xff0c;它用于控制循环语句的执行流程。与break不同&#xff0c;continue不会终止整个循环&#xff0c;而是终止当前迭代&#xff0c;并立即开始下一次迭代。这种行为使得可以在循环内部根据特定条件跳过某些代码块&#xff0c;从而控制程…

中国国家标准介绍

一、介绍 中国国家标准信息公共服务平台&#xff0c;这是由中国国家市场监督管理总局和中国国家标准化管理委员会共同运营的官方网站 https://openstd.samr.gov.cn/ 标准分为三类&#xff1a; GB&#xff1a;强制性国家标准GB/T&#xff1a;推荐行国家标准GB/Z&#xff1a;指导…

LT86101UXE 国产原装 HDMI2.0 / DVI中继器方案 分辨率 4Kx2K 用于多显示器 DVI/HDMI电缆扩展模块

1. 描述 Lontium LT86101UXE HDMI2.0 / DVI中继器特性高速中继器符合HDMI2.0/1.4规范,最大6 gbps高速数据率、自适应均衡RX输入和pre-emphasized TX输出支持长电缆应用程序,没有晶体在船上保存BOM成本,内部灵活的PCB TX巷交换路由。 LT86101UXE HDMI2.0/DVI中继器自动检测线缆损…

傅里叶变换

傅里叶定理指出&#xff1a; 任何信号都可以表示成&#xff08;或者无限逼近&#xff09;一系列正弦信号的叠加。在一维领域&#xff0c;信号是一维正弦波的叠加&#xff0c;那么想象一下&#xff0c;在二维领域&#xff0c;实际上是无数二维平面波的叠加&#xff0c;$(x&…

【面向就业的Linux基础】从入门到熟练,探索Linux的秘密(九)-git(1)

Git是一个版本管理控制系统&#xff08;缩写VCS&#xff09;&#xff0c;它可以在任何时间点&#xff0c;将文档的状态作为更新记录保存起来&#xff0c;也可以在任何时间点&#xff0c;将更新记录恢复回来。 文章目录 前言 一、git是什么 二、git基本概念 三、git基本命令 总结…

Vue3中为Ant Design Vue中Modal.confirm自定义内容

在一次业务开发时代码时&#xff0c;碰到了一种既想要Modal.confirm样式&#xff0c;又想要定制其content内容的情况。 大部分情况下&#xff0c;使用Modal.method()这种方式时&#xff0c;可能content内容固定都是字符串&#xff0c;那如果想要做更高级的交互怎么办&#xff…

将QT移植到IMX6ULL开发板

文章目录 前言一、编译系统1.设置交叉编译工具链2.编译系统3.烧写 二、Linux中下载QT1.安装 Qtcreator2.创建第一个程序3.配置 QtCreator 开发环境&#xff08;1&#xff09;打开选项界面&#xff08;2&#xff09;选择编译器&#xff08;3&#xff09;设置编译器&#xff08;4…

SoftCLT: 时间序列的软对比学习《Soft Contrastive Learning for Time Series》(时间序列、时序分类任务、软...

2024年6月25日&#xff0c;10:11&#xff0c;好几天没看论文了&#xff0c;一直在摸鱼写代码(虽然也没学会多少)&#xff0c;今天看一篇师兄推荐的。 论文&#xff1a; Soft Contrastive Learning for Time Series 或者是&#xff1a; Soft Contrastive Learning for Time Seri…

AutoX.js从某音分享链接解析出视频ID

背景 从某音分享的链接中解析出数字的videoID&#xff0c;用来做评论Intent跳转 思路 基本所有的短链接都是302跳转或者js跳转&#xff0c;熟悉http协议都知道&#xff0c;当状态码为302&#xff0c;从headers中提取Location即刻获得视频的原链接 链接中就带有videoId 要注意…

【串口通信】之TTL电平

1. 什么是串口 串口,全称为串行通信端口,是一种计算机硬件接口,用于实现数据的串行传输。与并行通信不同,串口通信一次只传输一个比特,数据通过串行线按顺序传输。串口通信在嵌入式系统、工业控制、计算机与外围设备通信等领域非常常见 2. 什么是串口通信 串口通信是指通过…

提升速卖通店铺排名:自养号测评的实战策略

卖家们追求的目标之一就是推广爆品。通过有效的推广策略&#xff0c;可以增加爆品的曝光度、吸引更多的买家&#xff0c;并带来更多的销售机会。那么&#xff0c;速卖通上如何推广爆品呢?下面我们来探讨一下这个问题。 首先&#xff0c;为了推广爆品&#xff0c;卖家需要进行…

护眼落地灯哪个牌子好?盘点五款必入不踩雷的护眼大路灯

护眼落地灯哪个牌子好&#xff1f;在这个快节奏的时代&#xff0c;护眼落地灯已经从一种高端选择转变为日常用眼生活中的必须品。不论是提升普通照明&#xff0c;还是针对孩子学习是改善光线质量环境&#xff0c;一款优秀的护眼落地灯都能成为我们生活中的照明神器。怎么选择一…

xmind2testcase工具将测试用例从Xmind转为CSV导入禅道

使用xmind编写测试用例&#xff0c;使用xmind2testcase工具将测试用例从Xmind转为CSV导入禅道&#xff0c;便于管理。 1.工具准备 第一步&#xff1a;安装python 第二步&#xff1a;安装xmind2testcase工具 运行-cmd-打开命令提示符弹窗&#xff0c;输入安装命令 安装命令&…

数千万“四高”中老年患者,如何推动国产营养保健品创新

“三高”指高血压、高血糖&#xff08;糖尿病&#xff09;、高血脂&#xff0c;是中老年群体的常见病。 然而&#xff0c;除了前述三者&#xff0c;高尿酸血症在我国的患病率正逐年提高&#xff0c;已成为仅次于糖尿病的第二大代谢性疾病。痛风是高尿酸血症典型症状之一。 加上…