1.怎樣更形象的解釋vue.js的響應(yīng)式系統(tǒng)棠赛？
在前端框架中哮奇，vue.js的靈魂所在就是其“數(shù)據(jù)響應(yīng)式”膛腐，簡(jiǎn)單的描述，就是當(dāng)數(shù)據(jù)改變后鼎俘，vue會(huì)告訴視圖部分哲身，根據(jù)數(shù)據(jù)的改變做出相應(yīng)的改變，這直接導(dǎo)致vue使用起來(lái)靈活贸伐，深受歡迎勘天。
視圖層做出相應(yīng)的反應(yīng)，需要用雙括號(hào)把數(shù)據(jù)括起來(lái)捉邢，當(dāng)data中的數(shù)據(jù)做出改變時(shí)候脯丝，視圖層的數(shù)據(jù)做出反應(yīng)，可以直接在html中渲染出來(lái)歌逢。
一個(gè)簡(jiǎn)單的例子：
<div id="app">
?{{ message }}
</div>
varapp =newVue({
el:'#app',
?data: {
message:'Hello Vue!'
?}
})
在以上的代碼中巾钉，代碼運(yùn)行以后，會(huì)自動(dòng)將Hello Vue顯示到網(wǎng)頁(yè)上秘案，將data中的message數(shù)據(jù)改變之后，重新執(zhí)行代碼潦匈，網(wǎng)頁(yè)便會(huì)做出相應(yīng)阱高，渲染出新的頁(yè)面，這就是“響應(yīng)式系統(tǒng)”茬缩。
2.搞清楚原理
在以上里例子中赤惊，并不需要改變DOM的數(shù)據(jù)，html就會(huì)做出改變凰锡，看起來(lái)太神奇了未舟，簡(jiǎn)直有一點(diǎn)玄幻的感覺(jué)，那就要完全搞清楚這么牛逼的過(guò)程是怎樣實(shí)現(xiàn)的掂为？
Vue的響應(yīng)模式是一種觀察者模式裕膀，data中的數(shù)據(jù)改變的時(shí)候會(huì)被觀察者觀察到，然后做出相應(yīng)的反應(yīng)勇哗，根據(jù)觀察到data改變后的數(shù)據(jù)重新渲染瀏覽器昼扛，做出響應(yīng)。
這個(gè)關(guān)系可以以下關(guān)系式來(lái)表示：
data -> watcher
? ? ?data - dep -> watcher
dip={
id:number,
subs:watchers,
}
用watcher表示觀察者欲诺，deta就是被觀察者抄谐，兩者之間形成一種依賴關(guān)系。Vue的作者設(shè)計(jì)了一個(gè)dip對(duì)象來(lái)表示這種依賴關(guān)系扰法，
dep 由唯一標(biāo)識(shí)屬性 id和用于記錄所有觀察者的 subs組成蛹含，所有的dip對(duì)象共同構(gòu)成一個(gè)dips對(duì)象（這里是一個(gè)數(shù)組，特殊的對(duì)象）塞颁。從這里可以看到浦箱，watcher實(shí)際上是一個(gè)函數(shù)卧斟，這個(gè)函數(shù)的作用就是根據(jù)data的變化做出改變，也可以看做是一種運(yùn)算機(jī)制憎茂。這種運(yùn)算機(jī)制會(huì)被記錄到一個(gè)叫g(shù)etter的屬性珍语，每次watcher運(yùn)算得到的結(jié)果將會(huì)被存儲(chǔ)在value 屬性當(dāng)中，實(shí)際上竖幔，這里還有一個(gè)叫cb的屬性板乙，記錄回調(diào)函數(shù)，當(dāng)watcher返回的值與當(dāng)前的value值不同時(shí)候會(huì)被調(diào)用拳氢。
