记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。