Vue 是一款流行的前端框架，其核心特性之一就是响应式数据。本文将深入探讨 Vue2.x 的响应式数据原理，包括数据劫持、依赖收集和派发更新等。
数据劫持
Vue2.x 的响应式数据原理是通过数据劫持实现的。在 Vue 实例化时，会对 data 数据进行递归遍历，将每个属性都转换成 getter 和 setter，当属性被读取或修改时，会触发相应的 getter 和 setter 函数。
下面是一个简单的示例：
-- -------------------- ---- -------
--- ---- - - ----- ----- --
----------------------------- -- -
--- ----- - ----------
--------------------------- ---- -
----------- -----
------------- -----
----- -
--------------- ------- -----------
------ ------
--
------------- -
--------------- ------ - --------------
----- - ---------
-
---
---
---------- -- -- ----- ---
--------- - --------- -- -- ---- - ------在上面的示例中，我们使用 Object.defineProperty 方法将 data 对象的 name 属性转换成 getter 和 setter。当读取 name 属性时，会输出 读取 name: Vue，当设置 name 属性时，会输出 设置 name 为 Vue2.x。
依赖收集
在 Vue2.x 中，每个组件实例都有一个对应的 Watcher 实例。当组件渲染时，会调用 Watcher 实例的 get 方法，该方法会触发数据的 getter 函数，从而将 Watcher 实例添加到该数据的依赖列表中。
下面是一个简单的示例：
-- -------------------- ---- -------
----- --- -
------------- -
--------- - ---
-
----------- -
--------------------
-
-------- -
--------------------- -- --------------
-
-
----- ------- -
------------- -
---------- - -----
-
-------- -
--------------------
-
-
--- ---- - - ----- ----- --
--- --- - --- ------
----------------------------- -- -
--- ----- - ----------
--- --- - --- ------
--------------------------- ---- -
----------- -----
------------- -----
----- -
-- ------------ -
-----------------------
-
--------------- ------- -----------
------ ------
--
------------- -
--------------- ------ - --------------
----- - ---------
-------------
-
---
---
--- ----------
---------- -- -- ----- ---在上面的示例中，我们使用 Dep 类来管理依赖列表，使用 Watcher 类来表示组件实例。当读取 name 属性时，会将 Watcher 实例添加到该属性的依赖列表中。
派发更新
在 Vue2.x 中，当数据被修改时，会触发对应的 setter 函数。在 setter 函数中，会调用依赖列表中所有 Watcher 实例的 update 方法，从而触发组件的重新渲染。
下面是一个简单的示例：
-- -------------------- ---- -------
----- --- -
------------- -
--------- - ---
-
----------- -
--------------------
-
-------- -
--------------------- -- --------------
-
-
----- ------- -
------------- -
---------- - -----
-
-------- -
--------------------
-
-
--- ---- - - ----- ----- --
--- --- - --- ------
----------------------------- -- -
--- ----- - ----------
--- --- - --- ------
--------------------------- ---- -
----------- -----
------------- -----
----- -
-- ------------ -
-----------------------
-
--------------- ------- -----------
------ ------
--
------------- -
--------------- ------ - --------------
----- - ---------
-------------
-
---
---
--- ----------
--------- - --------- -- -- ---- - -----------在上面的示例中，我们使用 Dep 类来管理依赖列表，使用 Watcher 类来表示组件实例。当设置 name 属性时，会触发该属性的 setter 函数，从而调用依赖列表中所有 Watcher 实例的 update 方法，从而触发组件的重新渲染。
总结
Vue2.x 的响应式数据原理是通过数据劫持、依赖收集和派发更新实现的。当组件渲染时，会调用 Watcher 实例的 get 方法，该方法会触发数据的 getter 函数，从而将 Watcher 实例添加到该数据的依赖列表中。当数据被修改时，会触发对应的 setter 函数，从而调用依赖列表中所有 Watcher 实例的 update 方法，从而触发组件的重新渲染。
Vue2.x 的响应式数据原理为我们提供了一种方便、高效的数据管理方式，对于前端开发来说具有重要的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658bf03eeb4cecbf2d13ef02