Vue3+TS Day03 - 基础指令 v-if、v-show、v-for、diff源码

一、 条件渲染

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容