Vue 双向数据绑定原理分析

nanfeiyan 发布于2019-08-22 10:47 / 841人阅读

摘要：关于双向数据绑定当我们在前端开发中采用的模式时，，指的是模型，也就是数据，，指的是视图，也就是页面展现的部分。参考沉思录一数据绑定双向数据绑定实现数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是定义的数据函数中。

关于双向数据绑定

当我们在前端开发中采用MV*的模式时，M - model，指的是模型，也就是数据，V - view，指的是视图，也就是页面展现的部分。通常，我们需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致。也就是：

而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据，以致于同步到后台服务器。也就是：

不同的前端 MV* 框架对于这种 Model 和 View 间的数据同步有不同的处理。在 Backbone 中，Model 到 View 的数据传递，可以在 View 中监听 Model 的 change 事件，每当 Model 更新，View 中重新执行 render。而 View 到 Model 的数据传递，可以监听 View 对应的 DOM 元素的各种事件，在检测到 View 状态变更后，将变更的数据发送到 Model。相较于 Backbone，AngularJS 所代表的 MVVM 框架则更进一步，从框架层面支持这种数据同步机制，而且是双向数据绑定：

不过在不同的 MVVM 框架中，实现双向数据绑定的技术有所不同。

AngularJS 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

参考：

What is two way binding?

Angular沉思录（一）数据绑定

Vue 双向数据绑定实现

数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是 Object.defineProperty() 定义的数据 set、get 函数中。Vue 中对于的函数为 defineReactive，在精简版实现中，我只保留了一些基本特性：

function defineReactive(obj, key, value) {
    var dep = new Dep()
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            if (Dep.target) {
                dep.depend()
            }
            return value
        },
        set: function reactiveSetter(newVal) {
            if (value === newVal) {
                return
            } else {
                value = newVal
                dep.notify()
            }
        }
    })
}

在对数据进行读取时，如果当前有 Watcher（对数据的观察者吧，watcher 会负责将获取的新数据发送给视图），那将该 Watcher 绑定到当前的数据上（dep.depend()，dep 关联当前数据和所有的 watcher 的依赖关系），是一个检查并记录依赖的过程。而在对数据进行赋值时，如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）。这样，即便是我们手动改变了数据，框架也能够自动将数据同步到视图。

数据绑定关系的识别过程

Vue 和 AngularJS 中，都是通过在 HTML 中添加指令的方式，将视图元素与数据的绑定关系进行声明。例如：

以上的 HTML 代码表示该 input 元素与 name 数据进行绑定。在 JS 代码中可以这样进行初始化：

var vm = new Vue({
  el: "#test",
  data: {
    name: "luobo"
  }
})

代码正确执行后，页面上 input 元素对应的位置会显示上面代码中给出的初始值：luobo。

由于双向数据绑定已经建立，因此：

执行 vm.name = "mickey" 后，页面上 input 也会更新为显示： mickey

在页面文本框中修改内容为：tang，则通过vm.name 获取的值为："tang"

那么初始化的过程中，Vue 是如何识别出这种绑定关系的呢？

通过分析源码，在初始化过程中（new Vue() 执行时），主要执行两个步骤：

compile

link

compile 过程中，对于给定的目标元素进行解析，识别出所有绑定在元素（通过 el 属性传入）上的指令。
link 过程中，建立这些指令与对应数据（通过 data 属性传入初始值）的绑定关系，并以数据的初始值进行渲染。绑定关系建立后，就可以双向同步数据了。

除了基本的双向数据绑定，Vue 还提供了更多的特性和功能，如果只是对双向数据绑定感兴趣，可以看下我的精简版实现：
https://github.com/luobotang/...
基本是从 Vue 代码中精简、改造得到的，主要保留了 Vue 中与双向数据绑定有关的部分（包括 compile、link 相关代码），指令只保留了 input[type="text"] 和普通文本两种类型，用于演示数据绑定的效果。

云服务器 GPU云服务器双向数据绑定 js双向数据绑定 js双向绑定数据 asp双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91256.html

Vue双向绑定原理，教你一步一步实现双向绑定

摘要：储存订阅器因为属性被监听，这一步会执行监听器里的方法这一步我们把也给弄了出来，到这一步我们已经实现了一个简单的双向绑定了，我们可以尝试把两者结合起来看下效果。总结本文主要是对双向绑定原理的学习与实现。当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，...

Labradors 2019-08-23 12:31 评论0 收藏0
Vue源码解析：双向绑定原理

摘要：无论是还是都提倡单向数据流管理状态，那我们今天要谈的双向绑定是否和单向数据流理念有所违背我觉得不是，从上篇文章语法树转函数了解到，双向绑定，实质是的单向绑定和事件侦听的语法糖。源码解析今天涉及到的代码全在文件夹下。通过对 Vue2.0 源码阅读，想写一写自己的理解，能力有限故从尤大佬2016.4.11第一次提交开始读，准备陆续写：模版字符串转AST语法树 AST语法树转rend...

oliverhuang 2019-08-23 14:52 评论0 收藏0
Vue源码解析：双向绑定原理

摘要：无论是还是都提倡单向数据流管理状态，那我们今天要谈的双向绑定是否和单向数据流理念有所违背我觉得不是，从上篇文章语法树转函数了解到，双向绑定，实质是的单向绑定和事件侦听的语法糖。源码解析今天涉及到的代码全在文件夹下。通过对 Vue2.0 源码阅读，想写一写自己的理解，能力有限故从尤大佬2016.4.11第一次提交开始读，准备陆续写：模版字符串转AST语法树 AST语法树转rend...

Kross 2019-08-02 14:08 评论0 收藏0
JavaScript 进阶之深入理解数据双向绑定

摘要：当我们的视图和数据任何一方发生变化的时候，我们希望能够通知对方也更新，这就是所谓的数据双向绑定。返回值返回传入函数的对象，即第一个参数该方法重点是描述，对象里目前存在的属性描述符有两种主要形式数据描述符和存取描述符。前言谈起当前前端最热门的 js 框架，必少不了 Vue、React、Angular，对于大多数人来说，我们更多的是在使用框架，对于框架解决痛点背后使用的基本原理往往关注...

sarva 2019-08-20 18:28 评论0 收藏0