Vue响应式原理是如何通过长尾词机制实现数据双向绑定的？

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

前言+响应式原理作为Vue的核心，使用数据绑定实现数据驱动视图。这是面试中经常考察的知识点，也是面试加分项。本文将循序渐进地解析响应式原理的工作流程，主要涵盖以下方面：

1. 响应式原理概述

2.响应式数据的基本实现

3.Vue的依赖收集与派发更新

4.响应式原理在实际项目中的应用

前言

响应式原理作为 Vue 的核心，使用数据劫持实现数据驱动视图。在面试中是经常考查的知识点，也是面试加分项。

本文将会循序渐进的解析响应式原理的工作流程，主要以下面结构进行：

1. 分析主要成员，了解它们有助于理解流程
2. 将流程拆分，理解其中的作用
3. 结合以上的点，理解整体流程
   

文章稍长，但大部分是代码实现，还请耐心观看。为了方便理解原理，文中的代码会进行简化，如果可以请对照源码学习。

主要成员

响应式原理中，Observe、Watcher、Dep这三个类是构成完整原理的主要成员。

• Observe，响应式原理的入口，根据数据类型处理观测逻辑
• Watcher，用于执行更新渲染，组件会拥有一个渲染Watcher，我们常说的收集依赖，就是收集 Watcher
• Dep，依赖收集器，属性都会有一个Dep，方便发生变化时能够找到对应的依赖触发更新
  

下面来看看这些类的实现，包含哪些主要属性和方法。