vue实现数据响应式的过程

1.怎样更形象的解释vue.js的响应式系统?

在前端框架中,vue.js的灵魂所在就是其“数据响应式”,简单的描述,就是当数据改变后,vue会告诉视图部分,根据数据的改变做出相应的改变,这直接导致vue使用起来灵活,深受欢迎。

视图层做出相应的反应,需要用双括号把数据括起来,当data中的数据做出改变时候,视图层的数据做出反应,可以直接在html中渲染出来。

一个简单的例子:

{{ message }}
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

在以上的代码中,代码运行以后,会自动将Hello Vue显示到网页上,将data中的message数据改变之后,重新执行代码,网页便会做出相应,渲染出新的页面,这就是“响应式系统”。

2.搞清楚原理

在以上里例子中,并不需要改变DOM的数据,html就会做出改变,看起来太神奇了,简直有一点玄幻的感觉,那就要完全搞清楚这么牛逼的过程是怎样实现的?

Vue的响应模式是一种观察者模式,data中的数据改变的时候会被观察者观察到,然后做出相应的反应,根据观察到data改变后的数据重新渲染浏览器,做出响应。

这个关系可以以下关系式来表示:

data -> watcher

data - dep -> watcher

dip={

id:number,

subs:watchers,

}

用watcher表示观察者,deta就是被观察者,两者之间形成一种依赖关系。Vue的作者设计了一个dip对象来表示这种依赖关系,

dep 由唯一标识属性 id和用于记录所有观察者的 subs组成,所有的dip对象共同构成一个dips对象(这里是一个数组,特殊的对象)。从这里可以看到,watcher实际上是一个函数,这个函数的作用就是根据data的变化做出改变,也可以看做是一种运算机制。这种运算机制会被记录到一个叫getter的属性,每次watcher运算得到的结果将会被存储在value 属性当中,实际上,这里还有一个叫cb的属性,记录回调函数,当watcher返回的值与当前的value值不同时候会被调用。

vue实现数据响应式的过程

加入我们

热门文章