了解MVVM框架嗎春贸？
- Vue.js
- React.js
- Angular.js
談?wù)勀銓VVM的認識？
MVVM的定義
M：Model（服務(wù)器上的業(yè)務(wù)邏輯操作）
V：View（頁面）
VM：ViewModel（Model與View之間核心樞紐拜秧，比如Vue.js）
Model與ViewModel之間的雙向關(guān)系
Model通過Ajax通信，發(fā)送數(shù)據(jù)給ViewModel章郁。
ViewModel也可以通過Ajax通信枉氮，發(fā)送請求給Model。ViewModel與View之間的雙向關(guān)系
ViewModel中的數(shù)據(jù)改變暖庄，可以同時改變View上的顯示內(nèi)容聊替。
View上的內(nèi)容改變(比如輸入框中的內(nèi)容)，也可以同時改變ViewModel中對應(yīng)的數(shù)據(jù)培廓。
MVC的定義惹悄，MVC與MVVM的區(qū)別
好文鏈接：MVC與MVVM的區(qū)別
雙向綁定是什么意思？
雙向是指ViewModel中的data部分和View之間的雙向關(guān)系肩钠。
正向：數(shù)據(jù)驅(qū)動頁面
反向：頁面更新數(shù)據(jù)
綁定是指自動化處理泣港，data改變了view隨之改變，反之也是价匠。
不用像傳統(tǒng)方式那樣当纱，通過onChange事件獲取用戶輸入，然后再通過改變innerHtml修改顯示踩窖。
雙向綁定是什么原理坡氯，可以寫出來嗎？
雙向綁定都是依賴ES5中一個重要的API，Object.defineProperty箫柳。
- 正向
Object.defineProperty的作用是監(jiān)聽data的變化手形，再監(jiān)聽到變化之后會觸發(fā)一個回調(diào)函數(shù)。
所以悯恍，我們要在Object.defineProperty的回調(diào)函數(shù)中寫明data與View的關(guān)聯(lián)就可以了库糠，后續(xù)中data有變化就會自動根據(jù)你寫的關(guān)聯(lián)處理修改View的顯示內(nèi)容。 - 反向
當(dāng)用戶在View中輸入內(nèi)容時坪稽，使用input事件(比如onChange)曼玩，修改data的值。
有些框架已經(jīng)為我們自動做了這個事情窒百，不需要我們再關(guān)心黍判。
比如，在Vue框架中篙梢，可以使用V-Model方便的關(guān)聯(lián)view和data顷帖。
Object.defineProperty()
定義：
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性渤滞， 并返回這個對象贬墩。
語法：
Object.defineProperty(obj, prop, descriptor)
參數(shù)：
obj：要在其上定義屬性的對象。
prop：要定義或修改的屬性的名稱妄呕。
descriptor：將被定義或修改的屬性描述符陶舞。
返回值：
被傳遞給函數(shù)的對象。
// 這個例子中绪励，把obj對象和input綁定了肿孵。
// 當(dāng)obj的值發(fā)生變化時，input框的內(nèi)容也會自動發(fā)生變化
// 當(dāng)然疏魏，input框中的內(nèi)容發(fā)生改變時停做，只要幫點onChange事件就能改變obj了，不再做演示
<input type="text" id="userInput">
<script>
// 數(shù)據(jù)雙向綁定
const obj = {};
Object.defineProperty(obj, "a", {
value: 12,
writable: true,
enumerable: true,
configurable: true
});
let bValue = 88;
Object.defineProperty(obj, "b", {
enumrable: true,
configurable: true,
get: function () {
return bValue;
},
set: function (value) {
bValue = value;
// 綁定輸入框
const userInput = document.getElementById("userInput");
userInput.value = value;
}
});
</script>
object.defineProperty()與reflect.defineProperty()的區(qū)別
- object.defineProperty()返回的是修改后的新對象
- reflect.defineProperty()返回的是一個布爾值
使用了什么設(shè)計模式大莫？
- Observer：監(jiān)聽者
監(jiān)聽Data的變化蛉腌，一旦監(jiān)聽到變化，就通知Dep(觀察者列表) - Dep：觀察者列表
一旦收到來自O(shè)bserver的通知只厘，就會回調(diào)所有的觀察者(Watcher)烙丛，做相應(yīng)的更新處理。 - Watcher：觀察者
觀察者這里存放的就是相應(yīng)的更新處理羔味，會更新View的顯示內(nèi)容河咽。
另外，觀察者可以通過訂閱的方式介评，加入到Dep(觀察者列表中)
生命周期是什么？
-
Vue的生命周期
lifecycle.png -
React的生命周期
lifecycle-react.png
有看過源碼嗎？
们陆。寒瓦。。
