简单几句话，知道什么是回流重绘、vue虚拟dom、diff算法和key

1什么是vue虚拟dom。先知道什么是dom树。

众所周知，一个页面形成的流程。（顺便聊一下回流和重绘）

（1） 解析 HTML===>生成DOM树

（2） 解析CSS===>生成CSSDOM树

（3） Render Tree ===> 从Dom树的根节点开始遍历每个可见的节点（因为这里面有display：none、scrpi等的，不被遍历。）

对于每个可见的节点，找到其对应的CSSDOM规则，并且应用。

生成Render Tree 。

fine，问题来了，什么是回流呢？就是在生成render Tree 的时候，有的CSS涉及到了HTML的尺寸（width/height）、布局改变、隐藏等。详细的可以去搜一下怎么会造成回流。<h3>所有的页面都至少会有一次回流，因为第一次生成render tree一定会回流</h3>

Render Tree生成后，layout（布局）就完成了开始绘制（添加属性，类似于颜色啊，大小啊之类的不会影响布局的属性）。如果说不出意外你不去改的话这辈子和个Render Tree就永远是这个树了。HTML页面就渲染结束了。

但是如果你想改。好嘛，我们就要开始判断你改的是什么了。如果说是影响布局的，那就是回流===>重绘

如果说你只想改个颜色啥的那就直接是重绘，没有回流。

<h3>杰伦：回流必然会带来重绘，但是重绘不一定会回流</h3>

关于如何优化，可以搜索回流和重绘

参考图：

好了，简单的理解了一些html解析和dom树的生成流程。就可以解释什么是虚拟dom了。

虚拟dom也还是那个dom。那为啥不用真实的dom呢？因为真实的DOM你一 *** 作，它立马给你回流重绘，可能你有10个事件在等着干，一个个都要回流重绘一遍太影响性能了。

（高光打过来！）虚拟dom就站出来了。

虚拟dom：如果有10次更新dom的动作，虚拟dom不会立即 *** 作dom，而是将这10次更新的内容储存起来，通过diff算法，把新的dom（vue刚构造的虚拟dom）和旧的dom（可能是页面上现在显示的真实的dom）进行对比。然后渲染对比完的DOM。

问题来了：什么是diff呢？这是一个算法，有兴趣的可以自己搜一下详细了解诶。我这里只是简单的介绍说这个东西就是 ：头头对比。肚子肚子对比。脚脚对比。同级对比，不会跨级对比。就是我的新头和我的旧头对比。我的新肚子和我的旧肚子对比。对比完了去页面上生成一个新的我。

上面提到了patch阶段，顺便说一下key diff算法会通过key可以判断这两个虚拟dom是不是同一个dom，所以我们key尽量都要写上，并且尽量不要使用索引作为key。可以使用 'xx-index' 方式写key。方便你我它~~

好了。本文over 以上都是自己复习的时候总结的内容，如果有问题请留言 Thanks♪(･ω･)ﾉ

用 v-for 指令根据一组数组的选项列表进行渲染。

通过数组的索引获取数组的数据

这种写法在数据很多的时候或者数据发生更新的时候处理就会很繁琐,

因此我们可以使用v-for指令来循环数组

基本数组的循环

v-for 还支持一个可选的第二个参数为当前项的索引。

数组项为对象的循环

使用索引

同时我们也可以用 of 替代 in 作为分割符

语法

示例:

也可以用 v-for 指令来循环对象。

第一个参数是训练遍历对象的属性值:

第二个的参数为对象的属性(键名)：

还可以通过第三个参数来获取索引值：

使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用 index (即数组的下标)来作为 key ,但其实这是不推荐的一种使用方法;

key值的使用其实是和vue响应式已经虚拟DOM有关, 那么我们通过下面的例子来了解一下

例子:

数据

页面渲染

但是数据发生了变化,

如果数据是这一种变化的话, 那么index没什么问题

数据前后变化的结果

这样vue就会分析到 其他的数据 都不需要改变,只需要在新增一个DOM节点,然后添加新增的数据就可以了

可以输入我们是在数组中间插入的数据就会不一样为了

这时数据的对比

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染;

是不是很惊奇,我明明只是插入了一条数据,怎么三条数据都要重新渲染而我想要的只是新增的那一条数据新渲染出来就行了

最好的办法是使用数组中不会变化的那一项作为 key 值,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性;使用 id 作为 key 值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染

此时数据的变化

现在对比发现只有一条数据变化了,就是 id 为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的;

为什么需要key属性: 虚拟DOM的diff算法,

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

v-if和v-for一起使用，v-for的优先级要高于v-if

可能会想到v-if和v-for是用的两种情况

那么接下来好好看看这两种情况

第一种情况: 为了过滤一个列表中的项目

为了过滤项目内容,我们可能会如下调用:

在这种情况下，请将 users 替换为一个计算属性（比如 activeUsers ），让其返回过滤后的列表。

示例详解:

如果现在只想显示价格在22元以上的水果,我们可能会这么写

这么写固然会得到你想要的效果, 但是因为v-for和v-if优先级的关系, 所以将会经过如下的运算

因此，哪怕我们只渲染出一小部分内容，也得在每次重新渲染的时候遍历整个列表，无论价格是否满足我们的条件

随意我们推荐使用计算属性, 在计算属性中处理过滤事宜, 计算属性会在计算完毕后缓存内容,提高遍历的效率

这样我们得到的结果是一样的,但是我们获得了如下的好处

第二种情况: 为了避免渲染本应该被隐藏的列表

也就是根据条件类判断列表的显示我们也后可能会使用下面的方法调用

实例详解:

原理是一样的, 就是如果这么写, 还是会循环遍历每一个数据,然后判断是不是显示 一样浪费

所以我们将 v-if 移动到容器元素，这样我们就不用对每一个元素都进行判断是否显示, 取而代之的是，我们只检查判断一次，且不会在 isShow 为假的时候还循环运算 v-for。

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以使用计算属性和方法来过滤数据

我们上面讲过了计算属性,下面来看看方法的使用

总结示例:

key 的作用是为了高效的更新虚拟 DOM,其原理是 vue在 path中调用 updateChildren 中会遍历所以的节点,如果没有设置 key 的时候,会认为比较的两个节点为同一个节点,会导致频繁的更新不同的元素,导致了频繁的 DOM *** 作如果设置了 key,在updateChildren过程中会很准备的判断节点是不是相同节点,从而避免频繁更新不同元素,使得 path 更加高效,减少DOM *** 作,提高性能

大家都知道mounted声明周期是发生在dom挂载完成之后，所以理论上是可以获取到dom元素的

但是有一些特殊情况下，是没办法在mounted中直接获取到都dom元素的。

例如，dom是一个v-if判断展示与否的元素时，如果我们在mounted里使判断条件成立，那么此时打印这个dom元素会是undefined。

这个时候就需要使用异步 *** 作来获取。

注意：本篇没有干货

ref有以下用法用法：

1、ref 加在普通的元素上，用thisrefname 获取到的是dom元素

2、ref 加在子组件上，用thisrefname 获取到的是组件实例，可以使用组件的所有方法。

3、利用 v-for 和 ref 获取一组数组或者dom 节点

效果图：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this$nextTick(()=>{}) 中调用。

vue 问题笔记 ref获取不到指定的DOM节点问题解决

首先 什么是虚拟节点？

        一般来说HTML的元素解析成DOM树后，真实挂载的元素就是Node。而VNode(虚拟节点)（本质是一个JS对象）是Vue解析template里面的元素生成的，而这些VNode组成就会形成一个VNodeTree（虚拟DOM），而虚拟DOM再经过一些 *** 作才会变成真实的DOM（不一定是一一对应的）。所以VNode可以做多平台的渲染。

那么 如果使用v-for列表渲染一个数组，那么有个添加 *** 作，在数组中间插入一个元素，那么插入渲染怎么才可以性能更好？

没有key就会调用patchUnKeyedChildren方法

        Vue源码会有c1保存着旧的VNode，c2保存着新的VNode，Vue内部就会先获取旧的和新的VNode数组（列表）的长度，再Mathmin（c1length,c2length）获取新旧数组中长度最短的值，然后遍历短的VNode列表（为什么会判短的，因为要避免越界的情况），分别获取c2和c1里面的一个值，下一步就进行新旧VNode的patch（更新），相同的就不更新，不同的就更新（如果类型相同，但是里面的内容不同，就只更新里面的内容就可以），直到遍历完。因为用的是短的遍历，如果旧的VNode数大于新的VNode数，多出来的旧VNode就会被卸载（unmountChildren）掉，如果旧的VNode数小于新的VNode数，就会创建新的VNode, 然后挂载(mountChildren)到新的VNode列表里，形成新的虚拟DOM后，最后渲染到真实的DOM（而这种处理方法的性能低）。

本萌新理解：就是相同的VNode尽可能的复用，不同就复用VNode节点，再修改内容。

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。

         如果使用key，就会使用patchUnkeyedChildren方法，这时vue就采用了diff算法。 当执行元素插进去数组中，vue会新生成一个新的VNodes并和原本的VNodes进行比较。（开发中，一般绑定key就是其代表内容的一致性）

        Vue考虑到中间插入删除 *** 作，就会先进行前面和后面的VNode比较，然后在中间就插入新的VNode，也考虑到随便在中间删了一个VNode。Vue内部用一个while循环（因为Vue不知道要在哪儿结束，VNode数量的不确定性）

        第一步，从头部开始遍历，找到新旧VNode数组（列表）里的第一个VNode，然后判断它们的type和key是否一样，如果VNode相同，就会进行patch，然后继续循环遍历，直到查找到不是新旧VNode就不同，才会跳出循环。

        第二步，开始从尾部开始进行遍历，判断它们的VNode是否相同，相同就patch，不同就直接跳出循环。

        第三步，如果旧VNode数组遍历完，新VNode数组还有VNode（新的VNode）,就会找到该VNode的位置，然后patch一个null(表示一次挂载 *** 作),新VNode列表就会在该位置新增一个VNode。

        第四步，如果新VNode数组遍历完，旧VNode数组里还有VNode,就找到对应位置的Vnode，直接卸载掉。

        第五步，如果前后都比较完后，新旧VNode数组中间部分的VNode数相等（或不等）并且无序，Vue会新建一个数组arr，会尽可能在旧VNode数组里找到对应新VNode数组的VNode，其实就是根据key建立索引找到它们相同的VNode，然后把旧VNode数组里含有的这个VNode放到arr里，直到相同的旧Vnode都patch完放到arr后，而这时如果旧VNode数组里还有多出来的VNode就会被卸载掉，而新VNode数组里还有多出来的VNode就会被放入arr里，最后再把arr插入到新的VNode中间。

以上就是关于简单几句话，知道什么是回流重绘、vue虚拟dom、diff算法和key全部的内容，包括:简单几句话，知道什么是回流重绘、vue虚拟dom、diff算法和key、第十节:Vue指令:v-for列表循环、你知道vue中key的作用和工作原理吗说说你对它的理解。等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！