企业官网建设流程全解析

相城做网站的公司,医院门户网站建设,山东建设厅官方网站李兴军,wordpress资源站主题v-show 和 v-if 的区别核心区别1. 渲染方式v-if#xff08;条件渲染#xff09;#xff1a;是真正的条件渲染条件为 false 时#xff0c;元素不会被渲染到 DOM 中条件为 true 时#xff0c;才会创建和渲染元素v-show#xff08;显示切换#xff09;#xf…v-show 和 v-if 的区别核心区别1. 渲染方式v-if条件渲染是真正的条件渲染条件为false时元素不会被渲染到 DOM中条件为true时才会创建和渲染元素v-show显示切换无论条件是什么元素始终会被渲染到 DOM中只是通过 CSS 的display属性来控制显示/隐藏条件为false时添加display: none!-- v-if条件为 false 时DOM 中没有这个元素 -- div v-ifisShowHello/div !-- v-show条件为 false 时DOM 中有这个元素但 styledisplay: none -- div v-showisShowHello/div2. 切换开销特性v-ifv-show初始渲染开销小条件为 false 时不渲染大总是渲染切换开销大销毁/重建元素小只改变 CSS编译条件惰性的lazy不惰性3. 生命周期v-iftemplate div v-ifisShow ChildComponent / /div /template条件为false→true组件会创建触发created、mounted等钩子条件为true→false组件会销毁触发beforeUnmount、unmounted等钩子v-show组件只会创建一次生命周期钩子只触发一次切换时不会触发生命周期钩子4. 其他区别v-if支持v-else-if和v-else支持template标签可以与v-for配合但不推荐同时使用v-show不支持v-else-if和v-else不支持template标签不能用于组件的根元素某些情况使用场景使用 v-if 的场景✅适合以下情况条件很少改变div v-ifuserRole admin 管理员面板 /div初始条件为 false且可能永远不会变为 truediv v-ifshowAdvancedSettings 高级设置大多数用户不会打开 /div需要懒加载组件HeavyComponent v-ifneedLoad /条件渲染多个元素template v-ifisLoggedIn div欢迎回来/div button退出/button /template template v-else button登录/button /template使用 v-show 的场景✅适合以下情况频繁切换显示/隐藏!-- 模态框、下拉菜单等 -- div v-showisModalOpen classmodal 模态框内容 /divTab 切换div v-showactiveTab tab1Tab 1 内容/div div v-showactiveTab tab2Tab 2 内容/div div v-showactiveTab tab3Tab 3 内容/div需要保持组件状态!-- 切换时保持表单输入状态 -- form v-showshowForm input v-modelformData.name / /form动画效果需要元素存在于 DOMtransition div v-showisVisible带过渡效果的内容/div /transition性能对比示例template div !-- 场景1频繁切换 - 使用 v-show -- button clicktoggle切换/button div v-showisShow 我会频繁切换推荐 v-show /div !-- 场景2条件很少改变 - 使用 v-if -- div v-ifuserType premium 高级用户专属内容推荐 v-if /div !-- 场景3大型组件懒加载 - 使用 v-if -- HeavyChart v-ifshowChart / /div /template script export default { data() { return { isShow: true, userType: premium, showChart: false } }, methods: { toggle() { this.isShow !this.isShow // 频繁切换 } } } /script总结简单记忆v-if条件渲染适合要不要的场景v-show显示切换适合显示/隐藏频繁切换的场景选择原则运行时条件很少改变 → 使用v-if需要频繁切换 → 使用v-show需要懒加载或条件复杂 → 使用v-if需要保持状态或性能优化切换 → 使用v-show