vue中的MVVM模式
即Model-View-ViewModel。
Vue是以數(shù)據(jù)為驅(qū)動的,Vue自身將DOM和數(shù)據(jù)進行綁定,一旦創(chuàng)建綁定,DOM和數(shù)據(jù)將保持同步,每當(dāng)數(shù)據(jù)發(fā)生變化,DOM會跟著變化。
ViewModel是Vue的核心,它是Vue的一個實例。Vue實例時作用域某個HTML元素上的,這個HTML元素可以是body,也可以是某個id所指代的元素。
DOM Listeners和Data Bindings是實現(xiàn)雙向綁定的關(guān)鍵,實現(xiàn)的原理是Object.defineProperty中的get和set方法,及消息訂閱模式。DOM Listeners監(jiān)聽頁面所有View層DOM元素的變化,當(dāng)發(fā)生變化,Model層的數(shù)據(jù)隨之變化;Data Bindings監(jiān)聽Model層的數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化,View層的DOM元素隨之變化。
Object.defineProperty詳解
Object.defineProperty(obj, prop, descriptor)
obj: 目標對象 -必填
prop: 要定義的屬性或目標方法 -必填
descriptor: 描述,是一個對象,以下詳解:
descriptor(value, writable, configurable, enumerable, get , set)
value: 屬性的值
writable: 屬性的值是否可以更改,默認false
configurable: 總開關(guān),設(shè)置為false后不能修改value、writable、configurable
enumerable:能否在for..in 或者Object.keys中循環(huán)出來。
在descriptor中不能同時設(shè)置(value、writable) 和 (get、set),否者會報錯,
就是說想用(get 和 set),就不能用(wriable 或 value中的任何一個)
下面舉例說明一下
var book = {
_year: 2017,
edtion: 1
}
// get set
Object.defineProperty(book, 'year', {
get: function () {
return this._year; //必須返回
},
set: function (newValue) {
this._year = newValue;
this.edtion += 1;
// dosomething
}
});
// writable value
book.year = 2018;
console.log(book.edtion); //2
Object.defineProperty(book,'_year', {
writable: false,
value: 2018
})
book._year = 2019 //沒報錯
console.log(book._year) // 2018,說明值不會改變