vue初始化和响应式原理

源码的运行过程

D:\codeTest\originCode\vue\src\core\index.js
初始化全局的api
vue\src\core\instance\index.js
vue的构造函数的路径（进行初始化注入，状态注入，事件注入，生命周期注入，渲染注入）
vue\src\core\instance\init.js
vue_init初始化
//初始化生命周期，$refs $parent $children update更新函数 程序的执行的是自上而下，组件的渲染是自下而上
initLifecycle(vm)
//初始化事件 $on $once $emit $off等
initEvents(vm)
//初始化渲染 $nextick() render函数
initRender(vm)
//真正的生命周期 生命周期通过callHook函数执行
callHook(vm, ‘beforeCreate’)
//注入数据放在提供数据之前的话是引入数据在initState阶段可能存在修改 将修改后的数据通过initProvide提供
initInjections(vm) // resolve injections before data/props
initState(vm) //初始化数据 进行数据的代理绑定
initProvide(vm) // resolve provide after data/props
callHook(vm, ‘created’)
vue\src\core\instance\state.js
数据响应式设置 添加依赖收集，每个对象添加观察者等
vue\src\core\instance\lifecycle.js
设置watcher与dep进行多对多映射
同时调用watcher中的update()方法-》调用reader()渲染页面

响应式的原理：

 通过object.defineProperty()函数对于data中的数据设置数据响应式代理，主要是利用订阅和发布的模式进行依赖收集和触发，其中在get方法中通过dep.pend()的方式去收集依赖，将实例dep对应的页面中的watcher添加到依赖数值中，通过set方法中的dep.notify()遍历依赖数组触发依赖执行watcher的update方法 然后更新页面，在此过程中，dep和watcher的关连是通过watcher中的get方法实现的，此方法中将与实例watcher相关的dep添加到当前watcher中，于此同时将当前的watcher添加到对应dep中，实现watcher和dep的多对多关系,数组对象则采用的是数组原型方法的重写实现数据的响应式
 整个流程
 new Vue()=>_init()=>initState()=>updateComponent()=>update()=>_render() 

全局api的使用

 $set的原理：根据设置的对象  找到对象的实例ob 在通过ob去通知设置对象dep进行数据的更新，因此全局涉及该对象的属性都更新 
 $deleted的原理：同$set类似，也是找到对应对象的ob 通过ob进行属性的更新，
 $watch原理：创建一个新的watcher，通过watcher的方式去巧妙的调用了属性的获取方法触发属性的dep.pend()方法  将当前的watcher添加到该属性的dep上