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的操作,这样会很方便.

四 欢迎大家借鉴和审查