Vue的数据绑定部分的简要过程解释

经过这幅图我来进行简要说明:
一 初始化阶段

1.咱们在开始便建立了MVVM构造函数,在vue生命周期的初始化阶段,会生成两个对象:Observer和Compile.
2.Observer对象的主要做用是对data中全部的数据来进行劫持监视,这为后来的页面更新起着很重要的做用.
3.Compile对象的做用是解析传进来的表达式和解析式,如:{{name}},V-class.
4. 初始化阶段的Observer对象在源码中会生成DEP对象,DEP对象是根据data中包含了多少个属性来产生的,如:
<h1>{{name}}</h1>          w1
<h1>{{wife.name}}</h1>     w2
<p v-text="wife.age"></p>  w3

new MVVM({
  el: "#test",
  data: {                        
        name: 'laowang',         d1
        wife: {                  d2
            name: 'xiaozhaung'   d3
        }
  }
})
这样,就产生了3个dep对象.
5.watcher的产生:Compile建立的由表达式和非事件指令的数量来决定
6.将watcher添加到dep中 相互关联起来:
    d1指向w1;
    d2指向w2和w3 由于是同一属性控制的两个表达式或者非事件指令
7.这样在初始化的阶段 视图也就初始化的产生了.

二 更新阶段

8.数据发生改变以后,Observer监视到变化,并将变化发到dep中,随着watcher也随之变化,最后更新视图.

三 小结

1.数据绑定,也能够说明为数据驱动,即当data中的数据发生改变时,页面上对应使用该属性或者经过该属性计算出来的与数据相关的部分会作一个局部更新.简单的说就是:数据变,页面变.
2.数据绑定的两个方向:
    a.初始化显示:页面(表达式/指令)能从data中取出数据进行解析并 显示.
    b.更新显示:更新data中的属性数据--→页面更新
3.vue框架操做起来简单便捷,由于虚拟dom的产生,最大限度的减小了对dom的操做,这样会很方便.

四 欢迎你们借鉴和审查