目录
1. 条件渲染
- 定义: 根据当前条件决定某些元素或组件是否渲染。
- Vue提供以下指令进行条件判断:
v-if 、 v-else、 v-else-if、 v-show
- v-if、v-else、v-else-if 与JS中的if、else、else if用法相似
- v-if的渲染原理:
- v-if是惰性的;
- 当条件是false的时候,其判断的内容完全不会被渲染或者会被销毁掉(标签不存在);
- 当条件是true的时候,才会真正渲染条件块中的内容;
1.1 template元素
- v-if必须要添加到一个元素上
- 如果我们希望切换的是多元素,此时我们应该渲染div,但是我们并不希望div这种元素被渲染,这个时候我们可以选择使用template
- template 最终是不会被存在的
- template元素可以当做不可见的包裹元素,并且在v-if上使用,最终template不会被渲染出来;
- 有点类似于小程序中的block
1.2 v-show指令
- v-show和v-if的用法看起来是一致的,也是根据一个条件绝对是否显示元素或者组件:
- v-show 为元素添加 display:none; 但是在浏览器中是真实存在的,v-if为false 的时候不会存在DOM里面;
- v-show是不支持template;
- v-show不可以和v-else一起使用;
- 元素频繁切换状态:使用v-show;
- 元素不会频繁切换 : 使用v-if;
2. 列表渲染
2.1 v-for的基本使用
- 基本格式 " item in 数组";
- 可以进行遍历对象 (item,key,index) in 对象 item 是 value key 是key index 是索引(index)
- 也可以遍历 数字 item in 5 从1…5 以此 列出 也有index
2.2 template元素
- 多插入一个div 会损耗性能
2.3 数组更新检测
- Vue将被侦听的数组的变更方法进行包裹,所以它们也将会触发视图更新。
- 包裹的方法包括: push、pop、shift(移除第一个元素)、unshift、splice、sort、reverse
- 数组改变,界面改变。 原因:Vue侦听
- 替换数组的方法:
- 上面的方法会直接修改原来的数组,但是某些方法不会替换原来的数组,而是生成全新的数组;
- 比如:filter()、concat()、slice()
2.4 v-for中的key的作用(面试点)
- 在使用v-for进行列表渲染的时候,我们通常会给元素或者组件绑定一个key;
- 官方解释
- key属性主要作用在Vue的虚拟DOM算法,在新旧nodes对比时候辨识VNodes;
- 不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;
- 使用key,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素;
什么是新旧nodes,什么是VNodes?
没有key的时候,如何尝试修改和复用的?
有key的时候,如何基于key重新排列?
2.4.1 认识VNode
- 前提:HTML元素和VNode之间的转化;
- VNode全称:Virtual Node,也就是虚拟节点;
- 浏览器渲染元素(html、h2、div等),可以说这些元素是DOM Node(真实节点);
- 无论是组件还是元素,它们在Vue中的表现形式是一个个的VNode;
- VNode的本质是一个JavaScript对象,这个对象可以描述标签(元素)的样子;
- 转换关系:template ——> VNode ——> 真实DOM(浏览器上显示的元素);
- 转换的最大好处:可以做多平台的适配(跨平台);
2.4.2 虚拟DOM
- 如果我们不只是一个简单的div,而是有许多元素,name它们应该会形成一个VNode Tree;
- VNode Tree 这个VNode树被称为虚拟DOM(Virtual DOM);
- 对虚拟DOM进行渲染,最后在浏览器中成为真实DOM;
- 正常情况下,虚拟DOM和真实DOM并不是一一对应的;
- 考虑组件不会一一对应,组件本身不在虚拟DOM中进行渲染;
2.5 Vue源码对于key的判断
- vue做插入操作?如何效率最高
- VNode Tree新增加的VNode,直接让真实DOM实现新增一个元素(性能最高);
- 如何达到:diff算法:新VNodes与旧VNodes比较过程就是diff算法;
- 列表进行更新的时候,Vue内部会根据是否有key不同的两种比较方法;
- 有key,使用patchKeyedChildren方法;
- 没有key,使用patchUnkeyedChildren方法;
- 没有key的过程如下(案例v-for渲染数组abcd,在数组中插入f):
- diff算法效率并不高;
- c和d来说他们事实上并不需要有任何的改动;
- 但是因为我们的c被f所使用,所有后续的内容都要一次进行改动,并且最后进行新增;
- 前面赋值,后面修改的时候改变,最后还要增加一个node[外链图片转存中…(img-Fx5p326cb0943e58696498a0e16d389.png#pic_center)
- 有key的过程(操作更多,比较复杂)如下(案例同上):
- 第一步操作是从头开始遍历、比较:
- a和b是一致的会继续比较;
- c和f因为key不一致,所以会break跳出循环;
- 第二步的操作是从尾部进行遍历、比较:
- 第三步是如果旧结点遍历完毕,但是依然有新的节点,那么就新增节点:
- 第四步是如果新的节点遍历完毕,但是依然有旧的节点,那么就移除旧的节点:
- 第五步,中间还有很多未知的或者乱序的节点:
启示:- Vue在进行diff算法的时候,会尽量利用我们的key来进行优化操作:
- 在没有key的时候我们的效率是非常低效的;
- 在进行插入或者重置顺序的时候,保持相同的key可以让diff算法更加的高效 ;
- patch 打补丁的意思 ,有n1的时候进行patch,没有n1的时候进行挂载操作;