【vue3】07. 跟着官网学习vue3-条件渲染,v-if和v-show

每日鸡汤:命运会眷顾有决断的人

目录

前言

一、v-if和v-show的使用场景

1. 组件需要初始化时

2. 切换不频繁的时候

二、v-show踩坑实例

1. vue3模版多个根结点

2. 解决办法

三、知识延伸

1. 文档片段

2. vue3的渲染机制

总结


前言

本篇文章对应学习官网【条件渲染

重申,学习基本用法,官网是最好的工具。本文仅总结我在项目开发中遇到的问题


一、v-if和v-show的使用场景

1. 组件需要初始化时

因为v-if是惰性的,如果你有一个组件,每次展示这个组件都需要执行组件内的某些初始化操作,那么你就用v-if。

因为v-if会导致组件的销毁和重建,你将你需要的初始化操作放在mounted中,每次切换v-if的值都会重新执行。

而v-show使用的是,修改css的display属性值导致的切换,如果你想要在修改v-show的值的时候,执行某些操作,那么你就需要用watch来监听v-show的变化了。

2. 切换不频繁的时候

什么是切换频繁?比如一个loading的状态,你点击一个按钮展示loading,一秒后隐藏loading。这就是比较频繁的操作,loading的展示与否需要用v-show。

切换不频繁的例子:比如在用户已经登录的状态就不展示登录入口,因为用户的登录状态不会频繁变化,这个时候就用v-if。

同样,在一个数据列表中,根据列表数据中的某个type字段来展示内容,也是不频繁切换的例子;

使用v-if在不满足条件的时候,就不会在dom中渲染该元素,会节省不少开销。

二、v-show踩坑实例

1. vue3模版多个根结点

在vue3中单组件文件template模版中已经允许,有多个根结点:

<!-- 组件 hello.vue -->
<template>
    <div>hello</div>
    <div>你好</div>
</template>

 在我们使用v-show操控这种,有多个根结点的组件的时候就会出现问题,这也是我昨天刚遇到的问题。

<!-- 这个时候 v-show 不会生效,hello组件不会隐藏 -->
<hello v-show="false"><hello>

2. 解决办法

(1)修改hello组件,使他只有一个根结点

(2)使用v-if代替,没错,v-if不会有这个问题

三、知识延伸

1. 文档片段

模版中如果有多个根结点,会被包装成文档片段。

DocumentFragment,文档片段接口,表示一个没有父对象的最小文档对象。

它被作为一个轻量版的 Document 使用,就像标准的 document 一样,存储由节点(nodes)组成的文档结构。与 document 相比,最大的区别是它不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会对性能产生影响。

2. vue3的渲染机制

可以学习官网,渲染机制部分的知识

包含多个根节点的模板被表示为一个片段 (fragment)

 所以,鉴于,文档片段不是真实dom的一部分,所以vue模版中的多个根结点,是没有父元素的。那么v-show来应用display样式的时候就会出错。

为什么v-if不会出错?很简单,v-if是不渲染,那就是直接略过这个组件就好了。


总结

条件渲染这部分,只有两个语法v-show,v-if,时刻牢记一个是css层面的,一个是dom层面的。然后在开发过程中,思考一下是不是频繁切换的组件(用v-show),是不是需要重新初始化(用v-if),基本就可以了。

最后再记住多个根节点的时候不要用v-show,一般就不会踩坑了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值