Vue原理分析

    xiaoxiao2022-06-27  180

    引言

    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去更新界面。


    最新回复(0)