Vue、AngularJS 双向数据绑定解剖

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 中添加指令的方式,将视图元素与数据的绑定关系进行声明。例如:

<form >

<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 属性传入初始值)的绑定关系,并以数据的初始值进行渲染。绑定关系建立后,就可以双向同步数据了。

以上是 Vue、AngularJS 双向数据绑定解剖 的全部内容, 来源链接: utcz.com/z/378747.html

回到顶部