Vue源码解析第12篇：patch机制是如何实现的？

本文共计7561个文字，预计阅读时间需要31分钟。

深入理解Vue的patch阶段，解析diff算法原理，前端那些事儿。当组件更新时，实例化渲染watcher时，会执行updateComponent方法：const updateComponent=()=> { // 执行 vm._render() };

深入理解 Vue 的 patch 阶段，理解其 diff 算法的原理 前言

前面我们说到，当组件更新时，实例化渲染 watcher 时传递的 updateComponent 方法会被执行：

const updateComponent = () => { // 执行 vm._render() 函数，得到 虚拟 VNode，并将 VNode 传递给 vm._update 方法，接下来就该到 patch 阶段了 vm._update(vm._render(), hydrating) }

首先会先执行 vm._render() 函数，得到组件的 VNode，并将 VNode 传递给 vm._update 方法，接下来就该进入到 patch 阶段了。今天我们就来深入理解组件更新时 patch 的执行过程。

历史

1.x 版本的 Vue 没有 VNode 和 diff 算法，那个版本的 Vue 的核心只有响应式原理：Object.defineProperty、Dep、Watcher。

• Object.defineProperty: 负责数据的拦截。