剖析Vue响应式，揭开ob的神秘面纱

前端

2024-01-10 11:16:54

作为面试题的常客，Vue响应式原理是很多人的梦魇，但跟着我的脚步，从概念到实践，你将轻松掌握响应式系统构建的核心技术，触及Vue响应式的精髓。

一、响应式系统概述

所谓响应式系统，是指当数据发生变化时，系统能自动更新UI界面，而无需手动刷新页面。响应式系统是构建现代单页面应用（SPA）的基础，它极大地简化了开发流程，提高了开发效率。

二、Vue响应式原理揭秘

Vue的响应式原理，主要依赖于Object.defineProperty()方法。通过该方法，我们可以拦截对象的属性访问和修改，从而实现数据的响应式更新。

Vue通过observe方法对数据进行观测，当数据发生变化时，observe会自动触发相应的更新操作。而__ob__则是observe方法的返回值，它记录了被观测的对象及其属性。

三、observe和ob深入解析

observe方法是一个递归函数，它会遍历数据对象的每个属性，并使用Object.defineProperty()方法将每个属性变成响应式的。

__ob__是一个包含了被观测对象及其属性的对象。它具有如下属性：

dep: 一个依赖收集器，用于收集对该对象的依赖。
value: 被观测的对象。
vmCount: 指向该对象的Vue实例的数量。

当一个对象被观测时，它会被添加到observe的targetMap中。targetMap是一个以对象作为键，以__ob__作为值的映射表。这样，当数据发生变化时，observe就可以通过targetMap快速找到对应的__ob__，并触发更新操作。

四、从源码角度理解响应式原理

为了更深入地理解Vue响应式原理，我们不妨从源码的角度进行分析。

在Vue的源码中，observe方法位于src/core/observer/index.js文件中。该方法首先对数据对象进行判断，如果数据对象已经是一个Vue实例，则直接返回该Vue实例的__ob__。否则，它会创建一个新的__ob__对象，并使用Object.defineProperty()方法将每个属性变成响应式的。

在__ob__对象中，dep属性是一个Set对象，它用于收集对该对象的依赖。当一个Vue实例通过vm.$watch()方法监听一个对象时，该对象就会被添加到dep中。

当数据发生变化时，observe会调用dep.notify()方法，通知所有依赖该对象的Vue实例更新UI界面。