让响应式原理变得更易懂

自从 Vue 面世以来，其响应式的特点就被人津津乐道，但网上那些源码解析文章，往往都爱整段粘源码，即使都打上了注释，却反而让人更加困惑，看不清本质。

于是我决定写一篇不粘源码，力求用最简单的语言，让您真正搞懂 Vue 响应式原理的文章。

01 Vue响应式系统

Vue响应式系统的核心是数据劫持 ，这是利用了JavaScript的闭包 特性，对数据属性进行拦截，当数据发生变化时通知视图进行更新。

Vue 实现响应式系统主要用到了两个对象：Observer和Dep。

• Observer: 观察者，负责观察数据属性的变化，当数据属性发生变化时通知Dep。
• Dep: 依赖收集器，负责收集所有依赖于该数据的视图组件，并在数据属性发生变化时通知这些组件进行更新。

02 如何让数据变成响应式数据？

实际上，Vue 中的数据响应式，分为两个层次：

• data选项中定义的数据是直接响应式 的；
• computed计算属性和watch侦听属性是间接响应式 的。

直接响应式

直接响应式很好理解，在data中定义数据，Vue会自动将其转换为响应式数据，对数据的任何修改都会触发视图更新。

间接响应式

间接响应式则相对复杂一些，也更加强大。

computed计算属性和watch侦听属性都是间接响应式数据，它们依赖于其他响应式数据，当这些依赖的数据发生变化时，它们会自动更新。

computed计算属性和watch侦听属性的区别在于：

• computed计算属性是一个只读属性，它依赖于其他响应式数据，当这些依赖的数据发生变化时，它会自动重新计算并更新；
• watch侦听属性是一个读写属性，它也可以依赖于其他响应式数据，但是当这些依赖的数据发生变化时，它不会自动更新，而是会触发一个函数，在这个函数中可以执行一些操作，比如更新视图、发送网络请求等。

03 深入剖析响应式原理

反向数据流

Vue 的响应式系统采用的是反向数据流的思想，即数据驱动视图，而不是视图驱动数据。

在反向数据流中，数据是作为源头，视图是作为接收者，当数据发生变化时，会通知视图进行更新，而不是视图主动去获取数据。

MVVM

Vue 是一个典型的 MVVM 框架，MVVM 是 Model-View-ViewModel 的缩写，是一种设计模式，它将数据、视图和视图模型分离开来，让数据和视图相互独立，提高了代码的可维护性。

在 Vue 中，Model层是数据层，View层是视图层，ViewModel层是连接数据层和视图层的桥梁，负责数据与视图的双向绑定。

04 总结

Vue 的响应式系统非常强大，它使得我们能够轻松地构建动态的、响应式的应用程序。

希望这篇文章能帮助您更好地理解 Vue 的响应式原理，如果您还有任何疑问，请随时留言提问。