程序员经验分享-hwhale

vue的v-if，v-show，动态组件，keep-alive

2023-11-02

v-if

如果条件不成立，不会渲染当前指令所在节点的dom元素，如果需要频繁切换显示隐藏的元素，使用v-if则会出现频繁新增删除节点，在性能上代价比较高

注意：最好不要v-for和v-if同时使用，v-for会比v-if的优先级高，如果连用会把v-if添加到每个元素，会造成性能问题

v-show

无论条件是否成立，dom元素都会被渲染，只是切换当前元素的显示和隐藏，只在初始的时候渲染代价比较高

当需要切换显示组件的时候，我们通常会使用v-if，v-show
使用v-if的时候会导致组件重新挂载，频繁切换的代价过高，而v-show不会让组件重新挂载，但是这样如果需要刷新数据的时候就不太方便，在vue中我们推荐使用动态组件component结合keep-alive，可以友好地缓存组件也可以使用activated、deactivated等生命周期进行数据处理

<keep-alive :include="componentName">
	<component :is="componentName"></component>
</keep-alive>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

javascript

前端

vue的v-if，v-show，动态组件，keep-alive 的相关文章

  • 不和谐机器人 |不和谐.js |类型错误：无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map

  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建

  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE

  • 使用模数按字母顺序对列表进行排序

    我在获取元素列表并按字母顺序对它们进行排序方面没有任何问题 但我很难理解如何使用模数来做到这一点 更新 这是按我的方式工作的代码 但是 我更喜欢下面提供的答案的可重用性 因此接受了该答案

  • 我想检查 $('#td1').text() === "x" 是否？

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点

  • 如何监听 jQuery AJAX 请求？

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用

  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗？

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J

  • 为什么是 javascript:history.go(-1);无法在移动设备上工作？

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结

  • 如何将 Google Charts 与 Vue.js 库一起使用？

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google

  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som

  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop

  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块？

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗

  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br

  • 如何使用tampermonkey模拟react应用程序中的点击？

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本

  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div

  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不

  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交

  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成

  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • c++运算符、继承、多继承中构造函数和析构函数顺序、内部类和局部类

    一 自增自减运算符 单目运算符 正号 负号 开始代码 include

  • 万向肖风最新演讲：区块链应用模式的终极猜想

    互联网的应用解放了消费者 区块链的应用解放了开发者 解放开发者就是解放创业者 本文谨代表作者个人观点 不代表火星财经立场 该内容旨在传递更多市场信息 不构成任何投资建议 火星财经APP 微信 hxcj24h 一线消息 10月27日 由万向区

  • 5G时代三兄弟，NB-IoT到底有多牛逼

    5G时代的诱惑 犹如隔壁家厨房的气味 间歇性地飘过 刺激着大家的神经 然而对于工业而言 这个气味的信号实在是太微弱了 在2020年以前 5G的大规模应用 大家都不抱希望 没有设备制造商会认为5G能够迅速布置下去 即使是相关标准进展神速 6

  • fork函数讲解及代码分析

    fork 函数 fork 的基础知识 父进程通过调用fork函数来创建一个新的运行的子进程 父进程和子进程之间最大的区别就是PID不同 1 在父进程中 fork返回新创建子进程的PID 2 在子进程中 fork返回0 3 如果出现错误 fo

  • 自动控制原理（四）

    根轨迹分析法 概述 根轨迹的概念 根轨迹的绘制 基本规则和步骤 特征方程 确定根轨迹的方向 起点和终点 根轨迹的分支数 根轨迹的连续性和对称性 实轴上根轨迹的分布 根轨迹的渐近线 根轨迹的分离 会合点 根轨迹与虚轴的交点 根轨迹的入射角和出

  • 第十一章从零玩转系列之微信支付实战PC端我的订单接入退款取消接口

    一 前言 欢迎来到本期的博客 本期将会讲解如何接入微信支付的退款和取消订单接口 本篇文章将是PC端的最后一个文章啦 之后将会是UniApp的篇章感受移动端的诱惑吧 本次为前端知识点如果不懂前段可以去仓库直接copy出来使用 如果有什么问题可

  • android ----- goldfish内核编译

    学习总纲 Android10 硬件抽象层 HAL 概要介绍和学习计划 编译环境 android 版本 android 10 0 0 r41 架构 aosp x86 64 eng 内核分支 android goldfish 4 14 gchi

  • 反射相关

    转载请注明出处 亲class hello public static void main String args Class

  • warning C4819: 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失...

    问题 Visual Studio 出现warning C4819 该文件包含不能在当前代码页 936 中表示的字符 请将该文件保存为 Unicode 格式以防止数据丢失 解决方案 1 修改字符编码格式 推荐 Visual Studio提供高

  • QT中使用嵌入窗口

    文章目录 需求 实现 1 在主界面中添加一个 treeWidget 2 响应树形控件点击事件 添加右侧布局 3 效果 4 改进 固定右侧布局的高度 多个右侧布局的切换 使用UI文件 第一种非常简单 添加新文件时 选择 Qt设计师界面类 第二

  • js 运算符

    JS 运算符 要进行各种各样的运算 就要使用不同的运算符号 1 算术运算符 A 10 20 A 10 20 A 10 20 A 10 20 1 取余运算符 两个数相除 取余数 A 10 3 A 1 如果余数不为0 则两个不能整除 A 10

  • linux的ping命令含义,Linux ping命令详解

    Linux系统的ping命令是常用的网络命令 它通常用来测试与目标主机的连通性 基于IMCP协议 常见命令参数 q 不显示任何传送封包的信息 只显示最后的结果 n 只输出数值 R 记录路由过程 c count 总次数 i 时间间隔 t 存活

  • 数字森林：无人机航测技术在林业调查中的应用

    林业调查是林业工作的基础 对于森林资源的管理 规划 保护 经济发展和农业种植等方面都具有重要的意义 传统林业调查主要依赖人工进行 存在工作效率低 数据精度低 数据分析困难 受地形限制 无法实时监测等缺陷 随着科技的不断发展 无人机作为一种高

  • Spring学习—Spring中定时器实现

    Spring学习 Spring中定时器实现 在一些工作需要使用到定时器 Spring很好的集成了定时器的功能 在Spring 中使用Quartz 本文介绍Spring3 0以后自主开发的定时任务工具 spring task 可以将它比作一个

  • 在程序里面执行system(“cd /某个目录“)，为什么路径切换不成功？

    粉丝提问 彭老师 问下 在程序里面执行system cd 某个目录 这样会切换不成功 为啥呢 实例代码 粉丝的疑惑是明明第10行执行了cd media操作 为什么12行执行的pwd gt test2 txt 结果提示的仍然是当前目录 这是一

  • linux 配置多个tomcat同时运行

    1 Linux系统下怎样配置多个Tomcat同时运行呢 首先修改变量为第一个tomcat 然后修改第二个tomcat启动的脚本 工程1 tomcat1 export CATALINA BASE data server tomcat expo

  • 10003---BootStrap网格系统

    Bootstrap 提供了一套响应式 移动设备优先的流式网格系统 随着屏幕或视口 viewport 尺寸的增加 系统会自动分为最多12列 什么是网格 Grid 摘自维基百科 在平面设计中 网格是一种由一系列用于组织内容的相交的直线 垂直的

  • edgewin10无法安装_win10内置Edge浏览器遇到“您未安装FLASH控件”如何解决

    win10系统在使用Edge浏览器时可能会遇到 您未安装FLASH控件 的提示 如下图所示 这到底是怎么回事 一方面可能是你的电脑确实没有安装FLASH插件 另一方面可能是由于浏览器禁止的FLASH插件的运行 如果没安装就下载 要是还是无法

  • 快递100 java 示例API 返回结果乱码 之替代方案

    快递100官方给出的java 版示例API无法使用 返回结果全是乱码 只能自己写一个 采用httpClient 不采用官方给出的URL方式 返回结果编码方式为UTF 8 import java io InputStream import j

  • vue的v-if，v-show，动态组件，keep-alive

    v if 如果条件不成立 不会渲染当前指令所在节点的dom元素 如果需要频繁切换显示隐藏的元素 使用v if则会出现频繁新增删除节点 在性能上代价比较高 注意 最好不要v for和v if同时使用 v for会比v if的优先级高 如果连用

热门标签