Vue源码解析笔记一
数据驱动
数据驱动视图简单来说就是数据变化引起视图变化,那么第一步就是先要知道数据什么时候发生变化,也就是说对数据的变化要进行侦测。
变化侦测
变化侦测就是追踪状态,亦或者说是数据的变化,一但发生了变化,就要去更新视图
变化侦测在angular中通过脏值检查流程来实现变化侦测,在react中通过对比虚拟Dom来实现变化侦测
Object数据“可观测”
Object.defineProperty方法使得数据变得“可观测”
let car = {} let val = 3000 Object.defineProperty(car, 'price', { enumerable: true, configurable: true, get(){ console.log('price属性被读取了') return val }, set(newVal){ console.log('price属性被修改了') val = newVal } })
通过Object.defineProperty()方法给Car定义一个price属性,并把这个属性读取喝写入分别使用get()和set()进行拦截,每当该属性进行读取或者写入操作的时候会触发get()和set()
依赖收集
视图里谁用到了这个数据就更新谁这就是依赖,在getter中收集依赖,在setter中通知依赖更新。