03.Vue3启示录：条件渲染&列表渲染-什么是VNodes？

1. 条件渲染

1. 定义: 根据当前条件决定某些元素或组件是否渲染。
2. Vue提供以下指令进行条件判断:

v-if 、 v-else、 v-else-if、 v-show

3. v-if、v-else、v-else-if 与JS中的if、else、else if用法相似
4. v-if的渲染原理:

1. v-if是惰性的；
2. 当条件是false的时候，其判断的内容完全不会被渲染或者会被销毁掉(标签不存在)；
3. 当条件是true的时候，才会真正渲染条件块中的内容；

1.1 template元素

1. v-if必须要添加到一个元素上
2. 如果我们希望切换的是多元素，此时我们应该渲染div，但是我们并不希望div这种元素被渲染，这个时候我们可以选择使用template
3. template 最终是不会被存在的

1. template元素可以当做不可见的包裹元素，并且在v-if上使用，最终template不会被渲染出来；
2. 有点类似于小程序中的block

1.2 v-show指令

1. v-show和v-if的用法看起来是一致的，也是根据一个条件绝对是否显示元素或者组件:

1. v-show 为元素添加 display:none; 但是在浏览器中是真实存在的，v-if为false 的时候不会存在DOM里面；
2. v-show是不支持template；
3. v-show不可以和v-else一起使用；
4. 元素频繁切换状态：使用v-show；
5. 元素不会频繁切换 ： 使用v-if；

2. 列表渲染

2.1 v-for的基本使用

1. 基本格式 " item in 数组"；
2. 可以进行遍历对象 (item,key,index) in 对象 item 是 value key 是key index 是索引(index)
3. 也可以遍历 数字 item in 5 从1…5 以此 列出 也有index

2.2 template元素

1. 多插入一个div 会损耗性能

2.3 数组更新检测

1. Vue将被侦听的数组的变更方法进行包裹，所以它们也将会触发视图更新。
2. 包裹的方法包括: push、pop、shift(移除第一个元素)、unshift、splice、sort、reverse
3. 数组改变，界面改变。 原因：Vue侦听
4. 替换数组的方法:

1. 上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组，而是生成全新的数组；
2. 比如:filter()、concat()、slice()

2.4 v-for中的key的作用(面试点)

1. 在使用v-for进行列表渲染的时候，我们通常会给元素或者组件绑定一个key；
2. 官方解释

1. key属性主要作用在Vue的虚拟DOM算法，在新旧nodes对比时候辨识VNodes；
2. 不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；
3. 使用key，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

3. 什么是新旧nodes，什么是VNodes?
4. 没有key的时候，如何尝试修改和复用的？
5. 有key的时候，如何基于key重新排列？

2.4.1 认识VNode

1. 前提：HTML元素和VNode之间的转化；
2. VNode全称：Virtual Node，也就是虚拟节点；
3. 浏览器渲染元素(html、h2、div等)，可以说这些元素是DOM Node(真实节点);
4. 无论是组件还是元素，它们在Vue中的表现形式是一个个的VNode；
5. VNode的本质是一个JavaScript对象，这个对象可以描述标签(元素)的样子；
6. 转换关系：template ——> VNode ——> 真实DOM(浏览器上显示的元素)；
7. 转换的最大好处：可以做多平台的适配(跨平台)；

2.4.2 虚拟DOM

1. 如果我们不只是一个简单的div，而是有许多元素，name它们应该会形成一个VNode Tree；
2. VNode Tree 这个VNode树被称为虚拟DOM(Virtual DOM)；
3. 对虚拟DOM进行渲染，最后在浏览器中成为真实DOM；

1. 正常情况下，虚拟DOM和真实DOM并不是一一对应的；
2. 考虑组件不会一一对应，组件本身不在虚拟DOM中进行渲染；

2.5 Vue源码对于key的判断

1. vue做插入操作？如何效率最高

1. VNode Tree新增加的VNode，直接让真实DOM实现新增一个元素(性能最高)；
2. 如何达到：diff算法：新VNodes与旧VNodes比较过程就是diff算法；
3. 列表进行更新的时候，Vue内部会根据是否有key不同的两种比较方法；
4. 有key，使用patchKeyedChildren方法；
5. 没有key，使用patchUnkeyedChildren方法；

2. 没有key的过程如下(案例v-for渲染数组abcd，在数组中插入f):

1. diff算法效率并不高；
2. c和d来说他们事实上并不需要有任何的改动；
3. 但是因为我们的c被f所使用，所有后续的内容都要一次进行改动，并且最后进行新增；
4. 前面赋值，后面修改的时候改变，最后还要增加一个node[外链图片转存中…(img-Fx5p326cb0943e58696498a0e16d389.png#pic_center)

3. 有key的过程(操作更多，比较复杂)如下(案例同上):

1. 第一步操作是从头开始遍历、比较：

• a和b是一致的会继续比较；
• c和f因为key不一致，所以会break跳出循环；
  

2. 第二步的操作是从尾部进行遍历、比较:
   
3. 第三步是如果旧结点遍历完毕，但是依然有新的节点，那么就新增节点：
   
4. 第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧的节点:
   
5. 第五步，中间还有很多未知的或者乱序的节点：
   
   启示:
6. Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作：

• 在没有key的时候我们的效率是非常低效的；
• 在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效 ；

7. patch 打补丁的意思 ，有n1的时候进行patch，没有n1的时候进行挂载操作；