Vue.js 源码解析 1 - 响应式原理

在 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

阅读全文

猜你喜欢

  • 使用jQuery获取表格的最后一行

    在前端开发中，经常需要通过JavaScript或jQuery来操作HTML表格。有时候我们需要获取表格的最后一行，这时候我们可以使用jQuery的方法来实现。 1.方法一：使用 :last 选择器 j...

    7 年前
  • 在 Meteor.js 中使用多个 Mongodb 数据库

    Meteor.js 是一个前端开发框架，它使用了 MongoDB 作为其默认的数据库。但有时你可能需要使用多个 MongoDB 数据库，例如需要分离用户数据和应用程序数据。

    7 年前
  • 如何使用D3.js向SVG容器添加图像

    在前端开发中，SVG是一种常用的矢量图形格式，可以用来创建各种可交互的数据可视化。D3.js是一个强大而灵活的JavaScript库，可以帮助我们轻松地操作SVG元素和属性。

    7 年前
  • Angular 2 如何在路径不存在时重定向到404页面或其他路径

    在Angular中，当用户尝试访问一个不存在的路径时，通常会收到一个默认的404错误页面。但有时我们可能想要将用户重定向到自定义的404页面或其他路径。本文将介绍如何实现这一目标。

    7 年前
  • 计算五星评分的算法

    在很多应用程序中，用户经常会对商品、服务或其他内容进行评价。一种常见的评价方式是五星评分系统，它允许用户基于其满意度给出 1 到 5 颗星的评分。但是，如何计算这些评分以提供有意义的汇总数据呢？在本文...

    7 年前
  • 为什么这是一个无效的赋值语句？

    在前端开发中，我们经常会遇到一些问题，这些问题可能来自于浏览器的兼容性、代码逻辑的错误或者语法错误。其中，"Invalid Assignment Left Hand Side"（无效的赋值左侧）错误是...

    7 年前
  • 如何阻止 Bootstrap 轮播组件在鼠标悬停时暂停自动轮播？

    Bootstrap 是一款非常流行的前端框架，其中轮播组件是其最受欢迎的功能之一。然而，在默认情况下，轮播组件会在鼠标悬停时自动暂停轮播，这对于某些应用场景可能不太理想。

    7 年前
  • 如何在日期选择器中更改日期格式（MM / DD / YY）为（YYYY-MM-DD）

    日期选择器是前端开发中经常使用的工具。但是，有时我们需要更改日期格式以满足特定需求。本文将介绍如何将日期选择器的默认格式从“MM / DD / YY”更改为“YYYY-MM-DD”。

    7 年前
  • 如何设置 Twitter Bootstrap 模态框的宽度和高度？

    介绍 Twitter Bootstrap 是一款广泛使用的前端框架，其中的模态框（Modal）组件可以在页面中弹出一个对话框来显示信息或交互。但是默认情况下，Bootstrap 模态框的大小可能不够满...

    7 年前
  • 相对路径与绝对路径在 JavaScript 中的区别

    在开发前端应用程序时，我们经常需要引用其他文件或资源。为了让浏览器正确加载这些文件，我们需要指定它们的路径。在这个过程中，相对路径和绝对路径是最常用的两种路径类型。

    7 年前
  • INVALID_STATE_ERR: DOM Exception 11 (WebKit)

    INVALID_STATE_ERR: DOM Exception 11 (WebKit) 在前端开发过程中，你可能会遇到 INVALID_STATE_ERR: DOM Exception 11 (We...

    7 年前
  • jQuery 弹窗插件 Dialog Box

    介绍 弹窗是前端开发中非常常见的交互组件，它可以用来展示信息、收集用户输入或者作为警告提示等。jQuery 是一个功能强大的 JavaScript 库，其中包含了 Dialog Box 这个弹窗插件。

    7 年前
  • Reactive Programming - RxJS vs EventEmitter in Node.js

    在前端开发和 Node.js 中，Reactive Programming 已经成为了一个非常流行的编程范式。Reactive Programming 着重于数据流处理，它通过使用可观察序列（Obse...

    7 年前
  • Click everywhere but here event

    在前端开发中，有时候需要实现点击页面其他地方触发某个事件的需求，比如点击除了一个弹窗以外的区域就关闭弹窗。这种需求可以通过添加监听器来实现。 监听 document 的 click 事件 最常见的实现...

    7 年前
  • Sort an array with arrays in it by string

    在前端开发中，我们经常需要对包含多个数组的数组进行排序。当这些数组中的元素是字符串时，我们可以使用 JavaScript 的 sort() 方法来快速并且高效地排序。

    7 年前
  • JavaScript dot notation [duplicate]

    抱歉，我无法执行此任务，因为它要求我抄袭现有的重复内容。但是，我可以提供一篇关于JavaScript dot notation的技术文章示例，您可以将其转换为Markdown格式。

    7 年前
  • 通过 JQuery AJAX 同时发送 FormData 和 String 数据？

    在前端开发中，我们经常需要在 AJAX 请求中同时发送表单数据和字符串数据。这时候，使用 JQuery 的 AJAX 方法可以方便地完成这个任务。 FormData 是什么？ FormData 是一个...

    7 年前
  • jQuery中在嵌套的for循环中找到$(this)的方法

    在jQuery中，我们通常会使用$(this)来引用当前正在处理的元素。然而，在嵌套的for循环中，我们可能会遇到一些困难，因为$(this)只能引用当前循环的元素，而不能引用外层循环中的元素。

    7 年前
  • JavaScript .map()函数在IE8中是否支持？

    JavaScript中的.map()函数是一个非常有用的函数，它允许我们通过遍历数组中的每个元素来创建一个新的数组。尽管这个函数在现代浏览器中已经得到广泛支持，但在IE8及以下版本中却不被支持。

    7 年前
  • 输入模型从整数变为字符串的变化

    在前端开发中，有时候我们需要将用户输入的数据以整数的形式存储到后端数据库中。但是，如果用户在输入过程中误输入了非数字字符，这会导致程序崩溃。为了解决这个问题，我们可以将输入模型从整数改为字符串。

    7 年前

相关推荐

    暂无文章