Vue、AngularJS 双向数据绑定解剖

多少与视图的绑定与一块,最后反映在对数据的读写处理进程中,也正是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()
            }
        }
    })
}

在对数码进行读取时,若是当前有 沃特cher(对数据的旁观者吧,watcher
会负责将获得的新数据发送给视图),那将该 Watcher
绑定到当下的数码上(dep.depend(),dep 关联当前数量和颇具的 watcher
的依赖关系),是二个反省并记下依赖的历程。而在对数码实行赋值时,假若数额产生转移,则公告全体的
watcher(借助
dep.notify())。那样,即正是我们手动改造了数码,框架也可以自动将数据同步到视图。

 

Vue 和 AngularJS 中,都是因此在 HTML
中加多指令的不2法门,将视图成分与数码的绑定关系进展宣示。例如:

<form id="test">
  <input type="text" v-model="name">
</form>

如上的 HTML 代码表示该 input 成分与 name 数据实行绑定。在 JS
代码中得以这样实行伊始化:

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

代码不易履行后,页面上 input
成分对应的地方会显得上面代码中提交的起先值:luobo。

 

由于双向数据绑定已经确立,由此:

  • 执行 vm.name = 'mickey' 后,页面上 input 也会更新为展现: mickey
  • 在页面文本框中期维修改内容为:tang,则经过vm.name 获取的值为:"tang"

AngularJS,那么早先化的进度中,Vue 是怎样鉴定区别出那种绑定关系的吗?

透过分析源码,在开始化进度中(new Vue() 执行时),重要实施多个步骤:

  • compile
  • link

compile 进度中,对于给定的靶子元素举行解析,识别出全数绑定在要素(通过
el 属性传入)上的一声令下。
link 进程中,建立这么些指令与相应数据(通过 data
属性传入开端值)的绑定关系,并以数据的先导值进行渲染。绑定关系创制后,就足以双向同步数据了。

 

相关文章