記mvvm的階段性理解

初識mvvm仍是在入門vue的時候，看見官方文檔說vue是個響應式的mvvm框架，當時哪會注意這個，管他什麼vm，和我入門vue有毛線關係。是的，拋棄它你能夠很愉快的入門，可是入門以後，必然會進入'深刻淺出'的階段，這個時候就不得不面對mvvm這東西了。

mvvm解釋

model-view-viewModel。數據模型與頁面視圖是一個頁面的不可或缺的，每一刻的頁面視圖都對應着一個數據模型的實際狀態。viewModel則是把數據轉化爲視圖的橋樑，這其中也是一種觀察者模式。

mvvm中的觀察者模式

mvvm的優點在於它的vm，能自動把數據時刻的變化轉換到視圖的變化。而這裏面就是觀察者模式的應用。view是觀察者，而model能夠當作是被觀察者，由於全部數據的最終流向的都是view層，viewModel正是觀察者模式的一個實體，在vue裏是常常見到這個實體的，叫vm實例，生成一個vm實例時，data就是它的model，el綁定的就是vm中的view，內部經過觀察者模式把view變成data的觀察者（調用get訪問data中的數據的都是觀察者）

mobx+react中的mvvm

mobx負責管理可觀察的數據源，react的視圖則是觀察者。

// model: mobx管理的可觀察數據
import { observable } from 'mobx';
class Person {
    @observable name = 'nicai';
    @observable age = 1;
    
    @compute get description() {
        return name + age;
    }
    ...
}


// view: react建立ui層
class MyPerson extends Component{
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <section>
                <h3>this.props.name</h3>
                <p>this.props.age</p>
            </section>
        )
    }
}
// 這個時候顯然只有model和view，還差個viewModel，view's model便是vm。因此咱們應該讓view成爲model的觀察者。

const person = new Person();
@inject('person') // 把狀態注入組件props
@observer MyPerson; // 讓組件成爲觀察者

以上模式能夠更清晰的看到mvvm的一個概念，當person改變，組件便會re-render。