在 Vue.js 中，响应式是核心特性之一。它使数据的变化能够自动地反映到视图上，同时也让开发者能够方便地操作数据。本文将深入探究 Vue.js 的响应式原理。
数据劫持
Vue.js 中的响应式原理是通过数据劫持实现的。在 Vue.js 初始化时，会对数据进行递归遍历，把每个属性都转换成 getter 和 setter，并且当属性被读取时记录依赖，当属性被修改时通知依赖更新。
下面是一个简单的例子：
--- --- - ------ ----- ---- ----
---------------------------- -- -
--- ----- - ---------
-------------------------- ---- -
----- -
------------------ ------ ------- -----------
------ ------
--
------------- -
------------------ ------ -------- --------------
----- - ---------
-
---
---
---------------------- -- -------- ---- ------- -- --
-------- - ----- -- -------- ---- -------- --
---------------------- -- -------- ---- ------- --在上面的例子中，我们通过 Object.defineProperty 方法把 obj 对象的每个属性转换成了 getter 和 setter。在读取属性时，会输出相应信息；在设置属性时，会同时更新属性值并输出相应信息。
依赖收集
在 Vue.js 中，响应式数据不仅仅是简单的 getter 和 setter，而是通过一个叫做“依赖收集器”的东西来管理依赖。依赖收集器用于收集所有依赖于数据的组件实例或 Watcher 对象，并且在数据变化时通知它们进行更新。
下面是一个示例代码：
-- -----
----- --- -
------------- -
--------- - ---
-
----------- -
--------------------
-
-------- -
--------------------- -- --------------
-
-
-- ------- --
----- ------- -
--------------- ---- --- -
------- - ---
-------- - ----
------- - ---
---------- - -----
---------- - ------------------------
---------- - -----
-
-------- -
--- ----- - ------------------------
-- ------ --- ----------- -
---------- - ------
----------------------
-
-
-
-- --- --
----- --- -
-------------------- -
------------- - --------
---------- - -------------
---------------------
-
-
-- ------
-------- -------------- -
-- ------ -- ------ ---- --- --------- -------
----------------------------- -- -
--- ----- - ----------
--- --- - --- ------
---------------
--------------------------- ---- -
----------- -----
------------- -----
----- -
-- ------------ -
-----------------------
-
------ ------
--
------------- -
-- --------- --- ------ -------
----- - ---------
------------------
-------------
-
---
---
-
--- -- - --- -----
----- -
----- -----
---- --
-
---
--- ----------- ------- ---------- -
----------------- -------------- -----------------------------
---
--------------------- -- -----
------- - ----- -- ------- ------- --在上面的代码中，我们定义了一个 Dep 类和一个
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27601