vue组件更新原理

使用过vue的都知道，我们直接给data中的属性进行赋值操作组件就会更新，那么为什么？

能力有限，从源码角度浅薄的分析一下其中的运行逻辑，求各位路过的大神踩踩！！！！

当我们new一个vue实例：

首先会调用Vue构造函数，构造函数中调用了_init方法

这个方法里面做了很多操作，但跟本次相关的又initState()方法里面的initData()

在initData()里面调用了observe()方法

这个方法内主要调用了new Observe()->walk()->defineReactive()

而在defineReactive中主要工作就是进行数据劫持，给原来data属性加上get/set描述符，这个的作用就是出发依赖的收集和通知相关依赖出发update,这里的依赖指的就是watcher

说到watcher,当组件挂载的时候实例化一个专门用来render组件的watcher

而在watcher实例化的过程中，!lazy时会触发其get方法

在defineReactive()方法要做到watcher的收集的话，一定要有一个依赖收集器来作为中间收集和通信的工具，这个以来收集器就是Dep,而popTarget(this)的作用就是将Dep.target=this，这个动作的作用可以认为已经将两者联通了，在get时就会触发watcher的收集工作，此时负责render工作的watcher就已经被收集了

当set的时候会通知收集到的watcher进行update工作

此时最开始收集到的负责render作用的watcher就触发了

这个时候就触发了

实现了组件的re-render.

大致简单的运行流程，如介绍，当然其中尤大神做了很多其他的优化操作，例如通过代理缩短访问data的路径，通过队列异步更新收集到的watcher,通过每个watcher实例化时的id进行watcher在队列中的排序，使得watcher是按照实例化时的顺利而不是通过收集时的顺序进行更新的，等等。