Vue源码中Watcher执行分析

触发更新时执行的watcher分为三种watcher,ComputedWatcher,userWatcherlistener,renderingWatcher前两种initState在core/instance/lifecycle.js中初始化renderingwatchermountComponent，然后在调用dep.notify时执行，会对watchers进行排序，然后依次更新watcher.update。对于不同类型的watcher，更新的处理方式是不同的。渲染观察者会判断当前组件观察者是否被放入队列。在组件之后更新子组件（先创建父组件）用户观察者在渲染观察者之前运行，（用户或计算属性在initState中创建，在mountComponent之前）如果组件在父组件执行期间被销毁，则跳过当前组件遍历队列中的watcher在watcher.run()run方法中调用get方法，get方法调用this.getter.call(vm,vm)this.getter是updateComponent方法。更新完成后，重置状态，调用activated和updated。Hooknotify(){//copyconstsubs=this.subs.slice()if(process.env.NODE_ENV!=='production'&&!config.async){//按watcher创建顺序排序subs.sort((a,b)=>a.id-b.id)}//调用观察者更新(leti=0,l=subs.length;iindex&&queue[i].id>watcher.id){i--}//将componentwatcher插入对应位置队列。splice(i+1,0,watcher)}//waiting=true表示当前队列正在执行if(!waiting){waiting=trueif(process.env.NODE_ENV!=='production'&&!config.async){//遍历所有watcher，调用watcher.run()flushSchedulerQueue()return}//生产环境会传入nextTick,nextTick(flushSchedulerQueue)}}}functionflushSchedulerQueue(){...//将watcher插入队列//遍历队列中的watcher，执行runwatcher.run()...}run(){...this.get()//this指watcher...}get(){pushTarget(this)...//this.getter是updateComponentvalue=this.getter.call(vm,v米）}