vue判断数组是否包含某个元素_Vue组件更新

Vue组件更新

我们之前有探讨过Vue的数据响应原理与nextTick的实现机制，除了这两项Vue还有一个很重要的知识点：就是组件更新。我们之前学习数据响应原理的时候曾经了解到我们的数据变化是可以被监听到的，在数据变更后，Vue会进行对应的组件更新。今天我们就来解答在Vue中组件是如何进行更新的。

组件更新主要包含两个部分：虚拟DOM（Virtual DOM）和diff算法，接下来我们就分别来分析一下

虚拟DOM

要介绍虚拟DOM我们首先需要知道为什么使用虚拟DOM，而不是使用真是DOM？

其中的一个原因是因为真实的DOM是一个十分复杂的浏览器对象，大家可以通过console.dir打印一个DOM来查看，所以直接操作DOM的成本是很高的，于是我们通过虚拟DOM的形式来操作，把最终的视图结果再通过真实DOM来进行渲染。

还有一个原因是因为使用虚拟DOM可以让Vue框架在多平台上进行运行，因为如果是直接操作浏览器的真实DOM，那么我们就无法在其他平台（比如：Weex）上面使用DOM，所以说虚拟DOM其实也是赋予了我们一个脱离环境依赖的视图表现。

说了这么多，到底什么才是虚拟DOM呢？其实本质上就是JS对象罢了，我们举个简单的例子

/** 这是一个极简的虚拟DOM */
const vnode = {
    
  tag: 'div',
  attr: {
    class: 'box'},
  children: [{
    tag: 'span', attr: {
    class: 'content'}, children: [1]}]
}
<!-- 这是真实DOM -->
<div class="box">
  <span>1</span>
</div>

组件更新

了解了虚拟DOM的概念，我们可以知道Vue的最终渲染都是通过虚拟DOM渲染的真实DOM。那么当数据改变时，Vue是如何通过虚拟DOM最终更新渲染成真实的DOM呢？这里Vue又做了哪些优化呢？这就要介绍一下我们的组件更新了

组件更新主要指的是：当我们的数据变更造成虚拟DOM更改时，如何计算这其中的变更从而进行高效更新

sameVNode

组件更新的第一步Vue会进行通过sameVNode对老VNode和新Vnode进行对比，此时有两种情况：