vue源码探究(第六弹)

作者: zhangjingbibibi | 来源:发表于2018-12-06 10:27 被阅读9次

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🎓

相关文章

  • vue源码探究(第三弹)

    vue源码探究(第三弹) 结束了之前prepare,现在开始正式进入vue源码探究部分 数据代理 先从简单的入手,...

  • vue源码探究(第六弹)

    vue源码探究(第六弹) 继续之前的,差不多到最后一part了,数据的双向绑定。 双向数据绑定 双向数据绑定是建立...

  • vue 源码探究(第一弹)

    vue 源码探究(第一弹) 最近在深 vue,接下来会有记录一系列 vue 源码解析方面的东西,主要从 3 个方面...

  • vue源码探究(第五弹)

    vue源码探究(第五弹) 不知不觉,到了vue源码探究的最后一部分,也是最为复杂的一部分,数据劫持和数据的双向绑定...

  • Vue源码探究-源码文件组织

    Vue源码探究-源码文件组织 源码探究基于最新开发分支,当前发布版本为v2.5.17-beta.0 Vue 2.0...

  • vue 源码探究(第二弹)

    vue 源码探究(第二弹) 接着上一篇,继续来讲一个非常有意思的东西documentFragment 解析 六、D...

  • vue源码探究(第四弹)

    vue源码探究(第四弹) 结束了上一part的数据代理,这一部分主要讲讲vue的模板解析,感觉这个有点难理解,而且...

  • Vue源码探究-组件的持久活跃

    Vue源码探究-组件的持久活跃 *本篇代码位于vue/src/core/components/keep-alive...

  • Vue源码探究-生命周期

    Vue源码探究-生命周期 本篇代码位于vue/src/core/instance/lifecycle.js 初步探...

  • Vue源码探究-全局API

    Vue源码探究-全局API 本篇代码位于vue/src/core/global-api/ Vue暴露了一些全局AP...

网友评论

    本文标题:vue源码探究(第六弹)

    本文链接:https://www.haomeiwen.com/subject/djuncqtx.html