Vue3+TS Day03 - 基础指令 v-if、v-show
2021-11-24 本文已影响0人
望穿秋水小作坊
一、 条件渲染
1、条件渲染指令是做什么的？有哪些常见的条件渲染语句？
- 在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。
- 条件渲染语句：v-if、v-show
image.png
image.png
2、 v-if 和 v-show 渲染上的区别？ 使用上有什么区别？
- v-if 会将元素从 dom 树上擦除
- v-show 仅仅是将元素的 display=none，进行元素隐藏
image.png
image.png
3、因为 v-if 是一个模板指令，所以必须有一个标签作为载体，如果我们希望多个元素同时切换，要怎么设计比较好？
image.png
image.png
二、 列表渲染
1、列表渲染通常需要借助那个指令？
- v-for 指令
image.png
2、v-for 的基本使用？
image.png
image.png
3、v-for 什么情况下和 template 一起使用？
image.png
4、Vue 能监听到哪些变更数组的方法？
image.png
5、什么是 VNode？
image.png
6、什么是 VDom？
- VNode === Virtual Node 是一个虚拟节点
- VDom === Virtual Dom 是多个 VNode 形成的树结构
-
虚拟 dom 最大的好处，就是方便跨平台渲染
image.png
7、v-for 中的 key 是什么作用？
image.png
8、插入 F 的案例，好好练习理解
image.png
9、Vue 对于v-for 【没有key】 的 diff 流程？
image.png
image.png
10、Vue 对于v-for【有key】 的 diff 流程？
image.png
image.png
image.png
image.png
