为了账号安全,请及时绑定邮箱和手机立即绑定

vue源码探究(第五弹)

标签:
Html5 Vue.js vuex

vue源码探究(第五弹)

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

数据劫持

数据劫持我们也可以称为数据绑定。

  • 初始化显示:页面(表达式/指令)能从data读取数据显示(编译/解析)

  • 更新显示:更新data中的属性数据 ===》 页面更新

相关问题 prepare

  • dep

    • 与data中的属性一一对应


  • watcher

    • 与模板中一般指令/大括号表达式一一对应


  1. 什么时候一个dep中关联多个watcher?
    多个指令或表达式用到了当前同一个属性 {{name}} {{name}}

  2. 什么时候一个watcher中关联多个dep?
    多层表达式的watcher对应多个dep {{a.b.c}}

例子

<div id="test">
  <p>{{name}}</p>
  <p v-text="name"></p>
  <p v-text="wife.name"></p>
  <button v-on:click="update">更新</button></div><script type="text/javascript">
  new MVVM({
    el: '#test',
    data: {
      name: 'sadamu',  // dep0
      wife: { // dep1
        name: 'binbin', // dep2
        age: 18 // dep3
      }
    },
    methods: {
      update () {
        this.name = 'avatar'
      }
    }
    // 主要梳理一下,数据改变如何 -> 页面变化
    // 1. tap button -> update Fn -> this.name = 'xxx'
    // 2. 数据劫持中的set方法
    // 3. newVal ->是object,需要observe(类似a.b.c这种) —> 不是对象,进入dep.notify
    // 4. notify -> 通知all watcher -> forEach -> sub.update()
    // 5. watcher中的update 方法,进入 run()
    // 6. old 和 new value 进行比较,若不同,进入callback更新界面
    // 7. callback是updateFn,同上
  })</script>

Dep

接下来讲讲什么是Dep?

Dep(Depend)

  • data中的每个属性(所有层次)都对应一个dep对象

  • dep创建的时机?

    • 在初始化define data中,每个属性会创建对应的dep对象

    • 在data中的某个属性值被设置为新的对象的时候


  • 个数

    • 与data中的属性一一对应


  • dep对象的结构
    {
    id, // 每个dep都有一个唯一的id
    subs //包含n个对应watcher的数组(subscribes的简写) 它是一个array[]
    }

    • subs属性说明

      • 当一个watcher被创建时,内部会将当前watcher对象添加到对应的dep对象的subs中

      • 当此data属性的值发生变化时,所有subs中的watcher都会收到更新的通知,从而更新对应的界面



Watcher

继续讲讲watcher

  • 个数

    • 模板中每一个非事件指令或者表达式都对应一个watcher对象

      • 事件指令,eg:v-on、v-bind...



  • 监视当前表达式数据的变化

  • 创建的时机

    • 在初始化编译模板的时候


  • watch对象的组成
    {
    vm, // vm对象
    exp, // 对应指令的表达式
    cb, // callback 当表达式所对应的数据发生变化时候的回调函数
    value, //当前表达式的值
    depIds // 表达式中各级属性所对应的dep对象的集合对象,它是一个对象object
    }

总结

dep与watcher的关系是: n:n(多对多)

  • 一个data中的属性对应一个dep,一个dep中可能包含多个watcher

    • 举个例子:模板中多个地方使用一个表达式或者说使用一个属性。

    • <div>{{name}}</div>

    • <p>{{name}}</p>

    • 这个时候,一个dep对应多个watcher


  • 模板中每一个非事件指令表达式都对应一个watcher,一个watcher中可能包含多个dep

    • 举个例子:表达式中包含了几个data属性

    • <div>{{a.b.c}}</div>

    • 这里的一个watcher,就对应了3个dep


数据绑定使用到的2个核心技术

  • defineProperty()

  • 消息订阅与发布


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
12
获赞与收藏
33

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消