Vue的响应式更新原理如何使其比React更快实现？

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

前言：我们都知道，Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归更新子组件。这也是它性能强大的原因之一。

例子：举个例子，来说这样一个组件：templ。

前言

我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。

例子

举例来说 这样的一个组件：

<template> <div> {{ msg }} <ChildComponent /> </div> </template>

我们在触发 this.msg = 'Hello, Changed~'的时候，会触发组件的更新，视图的重新渲染。

但是 <ChildComponent /> 这个组件其实是不会重新渲染的，这是 Vue 刻意而为之的。

在以前的一段时间里，我曾经认为因为组件是一棵树，所以它的更新就是理所当然的深度遍历这棵树，进行递归更新。本篇就从源码的角度带你一起分析，Vue 是怎么做到精确更新的。

React的更新粒度

而 React 在类似的场景下是自顶向下的进行递归更新的，也就是说，React 中假如 ChildComponent 里还有十层嵌套子元素，那么所有层次都会递归的重新render（在不进行手动优化的情况下），这是性能上的灾难。