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()
            }
        }
    })
}

当对数据进行读取时,如果手上发 Watcher(对数据的观察者吧,watcher
会负责用取得的新数据发送给视图),那将欠 Watcher
绑定到目前的数目达(dep.depend(),dep 关联时多少以及持有的 watcher
的凭关系),是一个反省并记下依赖之过程。而当针对数码进行赋值时,如果数据来变动,则通所有的
watcher(借助
dep.notify())。这样,即便是咱手动改变了数码,框架为会自行将数据并到视图。

 

Vue 和 AngularJS 中,都是透过以 HTML
中添加指令的道,将看到图元素与数据的绑定关系展开宣示。例如:

<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"

这就是说初始化的进程遭到,Vue 是什么样辨别出这种绑定关系的呢?

由此分析源码,在初始化过程遭到(new Vue() 执行时),主要实施两单步骤:

  • compile
  • link

compile 过程中,对于给定的靶子元素进行分析,识别出所有绑定以要素(通过
el 属性传入)上的指令。
link 过程中,建立这些指令与相应数据(通过 data
属性传入初始值)的绑定关系,并以数据的初始值进行渲染。绑定关系成立后,就好双向共数据了。

 

相关文章