细谈Vue2.0渲染更新原理，直击源码深处

2023-12-01 21:29:22

手写Vue2.0源码（四）——渲染更新原理｜技术点评

当我们初次接触Vue.js时，会被其简洁的语法和强大的数据绑定所吸引，但你有没有想过Vue2.0是如何将数据变化映射到视图层，实现页面更新的呢？这背后的原理正是本文所要探究的。

前言

在之前的文章中，我们已经介绍了Vue2.0的初始渲染原理，详细说明了Vue2.0是如何完成数据到视图层的映射过程。但是在实际开发中，我们经常会遇到这样的情况：当我们改变数据时，页面并不会自动更新。这是因为Vue2.0并不是在数据变化的瞬间就立刻更新视图，而是通过一个叫做“更新队列”的机制来管理数据更新。

渲染更新原理

1. 侦测数据变化

Vue2.0通过数据劫持来侦测数据的变化。数据劫持是指在数据对象上设置一个观察者，当数据发生变化时，观察者就会被触发，并通知Vue2.0进行更新。Vue2.0使用的是依赖收集的机制来实现数据劫持。当一个组件使用一个数据时，Vue2.0就会将该组件添加到该数据的依赖列表中。当该数据发生变化时，Vue2.0就会遍历该数据的依赖列表，并通知每个依赖该数据的组件进行更新。

2. 将数据变化放入更新队列

当Vue2.0侦测到数据变化后，它不会立刻更新视图，而是将数据变化放入一个叫做“更新队列”的队列中。更新队列是一个先入先出的队列，这意味着先进入队列的数据变化会先被处理。

3. 视图更新

当Vue2.0准备更新视图时，它会从更新队列中取出第一个数据变化，并将其应用到视图上。视图更新的过程是通过重新渲染组件来实现的。Vue2.0会遍历需要更新的组件，并调用它们的render方法来重新生成虚拟DOM。然后，Vue2.0会将虚拟DOM与之前的虚拟DOM进行比较，并找出需要更新的元素。最后，Vue2.0会将需要更新的元素更新到真实DOM上。

技术点评

Vue2.0的渲染更新原理设计得非常巧妙，它巧妙地利用了数据劫持和更新队列来实现数据的响应式更新。数据劫持可以有效地侦测数据变化，而更新队列则可以有效地管理数据更新。这种设计使得Vue2.0能够高效地更新视图，并保证视图与数据的一致性。

在Vue3.0中，渲染更新原理与Vue2.0基本相同，但也有了一些改进。例如，Vue3.0使用了一个叫做“Composition API”的新API来管理组件的内部状态，这使得组件的代码更加简洁和易于维护。此外，Vue3.0还使用了一个叫做“Reactivity API”的新API来管理数据的响应性，这使得数据的响应式更新更加高效。