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中通知依赖更新。