#### <font color=red /> 3，Vue程序源码运行过程解析 [vue 源码运行流程解析](https://www.jianshu.com/p/ebac754be4e9)  ##### 内部基础对象 - Observer: 用来深度遍历 model对象 ，对内部的每一个key用Object.defineProperty 函数对getter，setter 进行劫持 - Dep: 初始化vue实例时，Observer劫持model 每个key的getter，setter函数时，会为每一个key值都创建Dep对象，Dep对象内部有数组去存储watcher。 - Wathcer ： 当model数据变动时，触发对应的key的Dep.notify(), Dep.notity触发dep内部所有watcher的watcher.update()事件 ```javascript //name属性对应一个dep对象，dep内部一个数组保存着收集的 wather name -- {dep : [ watcher ] } ------------------------------------------------------------------------- 数据驱动页面 的事件流程 1.name 值变更 2.name的setter 函数执行 3.name对应的dep触发dep.notify() 4.dep内部所有watcher 触发wather.update() ： 1.页面更新 2.computed选项属性更新 3.wath选项属性更新 ```  **组件的渲染过程 　template ---> ast 抽象语法树---> render ---> vDom (虚拟DOM)---> 真实的Dom ---> 页面**