关于defineReactive等使用细节需要自行了解

一些关键知识点

  • $mount时 会 new Watcher 把组件的 updateComponent 方法传给watcher 作为getter

  • 在watcher的get中通过pushTarget 把当前watcher赋值给Dep.target

  • Dep的作用是调度中心/订阅器,在defineReactive 为每一个属性都实例话了一个Dep, 对用到该属性的Watcher进行管理(getter中收集,setter中通知)

  • Watcher是订阅者/观察者

  • 数据的Dep的subs数组存放这个数据所绑定的观察者对象,观察者对象的deps数组中存放着与这个观察者有关的数据Dep。所以数据的Dep与Watcher其实是多对多关系

  • $watch和computed观察者是在created生命钩子函数前就创建完毕并且绑定的,而render观察者是在mounted之前创建并绑定的,所以同一个组件中,render观察者的id会大于其他观察者(id是在后面执行队列里面升序排序的时候的依据)。 换句话说,在同一个组件的观察者中,当数据发生改变的时候,渲染函数观察者一定是最后执行的。 这个很好理解,其他观察者中难免会对数据进行修改,如果渲染函数观察者先执行了,然后其他观察者对数据进行改变的话,那么没办法将数据准确呈现在页面上,导致数据不一致性。

  • defineReactive --》 const dep = new Dep() --> getter中 --> dep.append() --> Dep.target.addDep(this) 这个this 就是当前dep实例 --> Dep.target是一个watcher watcher.addDep 会把当前watcher加入到 dep实例中。

流程图

最新文章

  1. 基于Spring AOP的JDK动态代理和CGLIB代理
  2. maven的阿里镜像
  3. 全零网络IP地址0.0.0.0表示意义详谈
  4. python 将字典的键&值从byte类型转换为str类型
  5. iOS:UIAlertController和UIAlertAction的详解
  6. nodejs小问题:[1]express不是内部或外部命令
  7. hdu1150 Machine Schedule 经典二分匹配题目
  8. mysql SQL语法总结
  9. hdu5798 Stabilization
  10. python3 Serial 串口助手的接收读取数据
  11. Java语言程序设计-助教篇
  12. android资源库
  13. package.json字段全解
  14. MySQL架构及SQL语句
  15. php xml格式对象 返回->对应格式数组
  16. Linux shell ftp命令下载文件 根据文件日期
  17. centos6中iptables单机网络防火墙的使用
  18. 实验吧ctf题库web题wp
  19. MySQL 、SQL MS Access、和 SQL Server 数据类型
  20. QWidget子窗口中setStyleSheet无效,解决方法

热门文章

  1. POJ 1039 直线和线段相交
  2. liunx驱动之字符设备的注册
  3. Java读取文件创建时间和最后修改时间
  4. Jenkins+Sonar 项目构建前代码审查
  5. ES6 箭头函数你正确使用了吗
  6. C#版Nebula客户端编译
  7. Linux 之 usermod
  8. Java程序设计(2021春)——第三章类的重用笔记与思考
  9. C语言:九宫格
  10. Vue全局弹窗:一次注册,全局可弹