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