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