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