首页 网络技术
  1. 正文

vue如何使用v-if来优化页面加载

使用 v-if 来优化页面加载

在 Vue 页面中,一些模块可能需要用户主动触发才会显示,比如弹框组件等这样的子组件,那么我们可以使用 v-if 来进行按需渲染,没必要一进页面就渲染所有模块。比如:

<template> <div @click="showModuleB = true"></div> <module-b v-if="isShowModuleB"></module-b></template><script>import moduleB from 'components/moduleB'export default { data() {
return {
 isShowModuleB: false
}
}, components: {
moduleB }}</script>

这样当 isShowModuleB 为 false 的时候便不会加载该模块下的代码,包括一些耗时的接口调用。当然 v-if 主要适用于代码量较多、用户点击不是很频繁的模块的显示隐藏,同时如果涉及到权限问题的代码都需要使用 v-if,而不是 v-show。

本文标题:vue如何使用v-if来优化页面加载
本文链接:https://www.qqooo.cn/post/6659.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!