vue源码探究(第六弹)

继续之前的，差不多到最后一part了，数据的双向绑定。

双向数据绑定

• 双向数据绑定是建立在单向数据绑定(model ==> view)的基础之上的
• 双向数据绑定的实现流程
  • 在解析v-model指令中，给当前元素添加input监听
  • 当input的value发生变化时，将最新的值赋值给当前表达式所对应的data属性

举个例子🌰

<div id="test">
  <input type="text" v-model="msg">
  <p>{{msg}}</p>
</div>
<script type="text/javascript">
  new MVVM({
    el: '#test',
    data: {
      msg: 'haha'
    }
  })
  // 通过v-model 我们可以实现数据的双向绑定 下面来简述一下流程
  // 1. 进入 new MVVM()
  // 2. observe 对数据进行监视
  // 3. new Observer(value)
  // 4. 对指定属性实现响应式的数据绑定 defineReactive
  // 5. new Dep -> defineProperty 添加get和set fn
  // 6. 进入compile编译
  // 7. step1 -> node2Fragment 文档碎片 将node进行批量处理
  // 8. step2 -> init() -> compileElement() -> 元素ele node -> compile() -> attrName = v-module
  // 9. bind() -> 先getVal() -> modelUpdater 更新数据
  // 10. new watcher() 用于监听属性值的变化 自动调用 更新对应的节点
</script>

最后附上一张图

image.png

End

vue的源码探究暂时就到这里了，bye🎓