从品牌网站建设到网络营销策划,从策略到执行的一站式服务
Vue数据驱动里的Watcher是什么意思,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
如果说Object.defineProperty是vue数据驱动的灵魂,那么Watcher则是他的骨骼。
简化后Watcher在new时,最终会调用自己的get方法,get方法中第一个语句pushTarget(this)是开启数据驱动的第一把钥匙。
pushTarget将传入的Watcher对象赋值给了Dep.target,还记得在讲Object.defineProperty时提到了,Dep.target.update是更新view的触发点,在这里终于找到了!
我们看到update方法最后执行了queueWatcher,继续看下去发现,这其实是一个更新队列,vue对同一个微任务的所有update进行了收集更新,最终执行了watcher.run,run方法又执行了getAndInvoke方法,getAndInvoke又执行了this.get方法。
到来一大圈,终于找到:在改变属性值时,触发了Dep.target所对应的Watcher的this.get方法,this.get方法其实就是传入进来的回调函数。回想前面介绍的,vue在挂载到真实dom时,newWatcher传入的回调是updateComponent。串联起来得到了结论:
我们在get属性时,Dep派发器收集到了Watcher当作依赖
当我们set属性时,Dep派发器事件分发,使所有收集到的依赖执行this.get,这时候view会更新。
从宏观角度看问题
当我们newVue时,首先会将传入的data将被vue包装为观察者,所有get和set行为都会捕捉到并执行响应的操作
接下来vue会将vue对象挂载到真实dom(其实指的虚拟的渲染),这个时候new一个Watcher,在newWatcher时,会执行一次this.get初始化一次值,对标updateComponent函数,这个时候会触发vue渲染过程
在vue渲染过程中,所有的数据都需要进行get行为才能得到值并给真实dom赋值,因此这时触发了所有data属性的get,并且此时Dep.target是updateComponent的Watcher,因此所有的data属性派发器都收集到了此Watcher,在set时,派发器notify进行事件分发,收集到的依赖Watcher都得到了通知进行update,所有又会执行updateCompoent进行更新view。
看完上述内容,你们掌握Vue数据驱动里的Watcher是什么意思的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图