双向绑定

Vue的双向绑定是通过访问器属性来实现（Object.defineProperty中的get、set，具体使用方法请google），具体通过代码示例解释

html元素

 <div id="app">
  <input type="text" v-model="text"></input>
  <span>{{text}}</span>
  <div>
    <p> {{food1}} </p>
    <p> {{food2}} </p>
    <p> {{favourite}} </p>
    <div>
      <p> <span> {{note}} </span> </p>
      <p> <span> {{text}} </span> </p> 
    </div>
  </div>
</div>

初始化

初始化Vue时将vue中的data绑定到view层面

  1. 创建一个Vue对象
class Vue {
  constructor (option) {
    Object.assign(this, option)
    var dom = nodeToFragment(document.getElementById('app'), this)
  }
}
var vm = new Vue({
  el: 'app',
  data: {
    text: 'Hello World!',
    food1: 'fish',
    food2: 'meat',
    favourite: 'you guess!',
    note: '注意不能与禁忌食物同食'
  }
})

示例中定义了一个Vue对象，根节点为id为app的元素

  1. 通过Object.assign把option相应的配置（data等）都分配给vm
  2. nodeToFragment方法实现从根节点开始遍历html元素节点，将data元素绑定至view层
    nodeToFragment方法的实现如下
function nodeToFragment(node, vm) {
  var child
  var vmDataName
  var fragment = document.createDocumentFragment()
  while (child = node.firstChild) {
    // 节点为元素
    if (child.nodeType === 1) {
      vmDataName = child.getAttribute('v-model')
      if (vmDataName) {
        child.value = vm.data[vmDataName]
      }
      nodeToFragment(child, vm)
    } else if (child.nodeType === 3){ // 文本节点
      if(/\{\{(.*)\}\}/.test(child.nodeValue)) {
        vmDataName = RegExp.$1
        child.nodeValue = vm.data[vmDataName]
      }
    }
    fragment.append(child)
  }
  node.append(fragment)
}

通过while (child = node.firstChild)循环遍历node的所有子节点
a. 如果是元素节点，如果获取到v-model属性，更新元素的value值，然后继续遍历child的子节点
b. 如果是文本节点，匹配‘{{}}’中的内容，替换成对应的data值
c. 将更新后的节点append至fragment中
d. 将最后生成的节点全部append至node元素下

View至Model层的更新

对上面代码进行修改，使得对input元素的修改能够反映到Vue中

function nodeToFragment(node, vm) {
  while (child = node.firstChild) {
    // 节点为元素
    if (child.nodeType === 1) {
      vmDataName = child.getAttribute('v-model')
      if (vmDataName) {
        child.value = vm.data[vmDataName]
        bindViewToModel(child, vm.data, vmDataName) // View层的变化反应到model层
      }
      nodeToFragment(child, vm)
    }
    ……
  }
  node.append(fragment)
}

function bindViewToModel(node, obj, key) {
  node.addEventListener('input', e => {
    obj[key] = e.target.value
  })
}

添加了一个bindViewToModel方法，通过监听input事件，更新model

Model至Vue的更新

class Dep {
  constructor() {
    this.subs = []
  }
  addSubs(sub) {
    this.subs.push(sub)
  }
  notify() {
    this.subs.forEach(sub => {
      sub.bindModelToView()
    });
  }
}
function definePropertyOfData(obj) {
  for(var key in obj) {
    (function(dep) {
      var value = obj[key]
      Object.defineProperty(obj, key, {
        get: () => {
          if (Dep.target) {
            dep.addSubs(Dep.target) //订阅
          }
          return value
        },
        set: val => {
          value = val
          dep.notify() 
        }
      })
    })(new Dep())
  }
}

对于obj的每一个属性，每次有对象访问这个属性时，如果这个对象订阅了这个属性（Dep.target为true），就将对象添加至订阅列表（dep.addSubs）。在属性值发生改变时，对所有订阅列表中的对象发生一个通知（notify）。对象接受到通知以后，就将更新后的属性值反应到View中

现在对html中每一个访问了data元素值的元素，都订阅它绑定的属性值

class Watcher {
  constructor (node, obj, key) {
    this.node = node
    this.obj = obj
    this.key = key
    Dep.target = this
    node.nodeValue = obj[key]
    Dep.target = null
  }
  bindModelToView () {
    this.node.nodeValue = this.obj[this.key] 
  }
}
function nodeToFragment(node, vm) {
  ……
  while (child = node.firstChild) {
   ……
   else if (child.nodeType === 3){ // 文本节点
      if(/\{\{(.*)\}\}/.test(child.nodeValue)) {
        vmDataName = RegExp.$1
        new Watcher(child, vm.data, vmDataName)
      }
    }
    fragment.append(child)
  }
  node.append(fragment)
}

通过Dep.target = this获取订阅者， node.nodeValue = obj[key]会调用对象的get方法，在get方法中，发现订阅者(Dep.target)存在，就会通过dep.addSubs(Dep.target)将该订阅者添加至订阅列表，之后将Dep.target 设置为空。obj属性值发送改变时（调用set方法），通过dep.notify()发送通知。接收到通知后，Dep.target调用bindModelToView方法将model改变反应至View中

完整代码


var dom = `
    <div id="app">
        <input type="text" v-model="text"></input>
        <span>{{text}}</span>
    <div>
      <p> {{food1}} </p>
      <p> {{food2}} </p>
      <p> {{favourite}} </p>
      <div>
        <p> <span> {{note}} </span> </p>
        <p> <span> {{text}} </span> </p> 
      </div>
    </div>
    </div>`
document.body.innerHTML = dom

// View层的变化反应到model层：通过addEventListener监视vue层事件，更新model

class Vue {
  constructor (option) {
    Object.assign(this, option)
    definePropertyOfData(this.data)
    var dom = nodeToFragment(document.getElementById('app'), this)
  }
}
function definePropertyOfData(obj) {
  for(var key in obj) {
    (function(dep) {
      var value = obj[key]
      Object.defineProperty(obj, key, {
        get: () => {
          if (Dep.target) {
            dep.addSubs(Dep.target) //订阅
          }
          return value
        },
        set: val => {
          value = val
          dep.notify() 
        }
      })
    })(new Dep())
  }
}
class Watcher {
  constructor (node, obj, key) {
    this.node = node
    this.obj = obj
    this.key = key
    Dep.target = this
    node.nodeValue = obj[key]
    Dep.target = null
  }
  bindModelToView () {
    this.node.nodeValue = this.obj[this.key] 
  }
}
class Dep {
  constructor() {
    this.subs = []
  }
  addSubs(sub) {
    this.subs.push(sub)
  }
  notify() {
    this.subs.forEach(sub => {
      sub.bindModelToView()
    });
  }
}
var vm = new Vue({
  el: 'app',
  data: {
    text: 'Hello World!',
    food1: 'fish',
    food2: 'meat',
    favourite: 'you guess!',
    note: '注意不能与禁忌食物同食'
  }
})
function nodeToFragment(node, vm) {
  var child
  var vmDataName
  var fragment = document.createDocumentFragment()
  while (child = node.firstChild) {
    // 节点为元素
    if (child.nodeType === 1) {
      vmDataName = child.getAttribute('v-model')
      if (vmDataName) {
        child.value = vm.data[vmDataName]
        bindViewToModel(child, vm.data, vmDataName) // View层的变化反应到model层
      }
      nodeToFragment(child, vm)
    } else if (child.nodeType === 3){ // 文本节点
      if(/\{\{(.*)\}\}/.test(child.nodeValue)) {
        vmDataName = RegExp.$1
        new Watcher(child, vm.data, vmDataName)
      }
    }
    fragment.append(child)
  }
  node.append(fragment)
}
function bindViewToModel(node, obj, key) {
  node.addEventListener('input', e => {
    obj[key] = e.target.value
  })
}
window.setTimeout(() => {
  vm.data.favourite = 'rice'
  console.log(vm.data)
}, 5000)

在谷歌中，将代码黏贴纸console中，即可尝试看到效果。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345