Vue原理分析

引言

vue最独特的特性之一就是响应式系统，赋予框架重新渲染的能力，其重要组成部分就是变化侦测，当数据变化时会通知视图进行相应的更新。本文主要是分析变化侦测的原理。主要分为两个阶段，一个是初始化，一个是更新视图

初始化阶段

【分析】：首先创建一个最外层的实例，new一个MVVM
它的内部，有两个方向

• 一个是创建Observer，劫持/监视data中的所有层次的属性。同时为每个属性创建了另外的对象，Dep,与data中的属性一一对应。
• 另个方向，同时创建了Compile对象，功能是解析指令属性/大括号表达式。目的是更新显示界面，有个该概念叫初始化视图。调用Updater来初始化视图，updater中有很多更新某个节点的方法。这条线就实现了初始化显示。Compiler在解析指令属性/大括号表达式时除了初始化视图，还为表达式创建对应的Watcher,指定更新的函数。
• 现在Dep有了，Watcher有了，建立他们之间关系。专业来说就是添加订阅者。Watcher是订阅者，一个订阅者有一个监听，指定了一个回调函数，这个回调函数用来更新界面。 所以我的Dep里有个容器才存watcher，也就是subs,用来保存多个watcher的数组容器。
  至此，初始化阶段结

更新阶段

【分析】：wm.name=‘Tom’，导致oberser里的set调用，他通知dev（通知变化）,dev会通知所有相关的wacther,watcher收到信息后调用回调函数updater去更新界面。