闭包和vue虚拟Dom

虚拟Dom

概念

虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分

vue中的虚拟Dom

虚拟DOM在vue中主要提供与真实节点对应的虚拟节点vnode,然后需要将vnode和oldVnode进行比对，然后更新视图，对比两个虚拟节点的算法是patch算法

为什么需要虚拟Dom

在vue 中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实 DOM，由于真实 DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。因此, vue在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。

虚拟Dom转化成真实Dom

在一个组件实例首次被渲染时，它先生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置，此时，每个虚拟dom便会对应一个真实的dom。

如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新树和旧树对比通过对比， vue会找到最小更新量，然后更新必要的虚拟dom节点，最后，这些更新过的虚拟节点，会去修改它们对应的真实dom。这样一来，就保证了对真实dom达到最小的改动。

闭包

概念

一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

特点

1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

使用场景

定时器中使用

function f1(a) {
   
    function f2() {
   
        console.log(a);
    }
    return f2;
}
var fun = f1(1);
setTimeout(fun,1000)

回调