一、 从MVC到MVVM
1. （客户端）MVC调用关系
用户通过操作view调用controller，controller决定调用哪个modal，最后modal使用观察者模式触发view的监听事件
2. MVVM模式
总结： ViewModa是面向界面的数据，其中包含双向绑定的引擎
1). Model-View-ViewModel，除了领域模型（Domain Model）和视图（View）之外增加了ViewModal用于同步Modal和View
2). ViewModel的含义就是 "Model of View"，视图的模型。 在图形界面应用程序当中，界面所提供的信息可能不仅仅包含应用程序的领域模型。还可能包含一些领域模型不包含的视图状态。不在领域模型之中但是描述界面所必须的数据，如排序、隐藏显示等状态（State）
3). ViewModal中会有一个Binder或者Data-binding engine的东西，View和Modal中的数据同步问题由Binder处理。你只需要在View的模板语法中，指令式的声明View上显示的内容是与哪一块数据绑定的。
4). 当ViewModel对进行Model更新的时候，Binder会自动把数据更新到View上去，当用户对View进行操作（例如表单输入），Binder也会自动把数据更新到Model上去。这种方式称为：Two-way data-binding，双向数据绑定。
二、对比
1. 数据渲染和绑定
1). View(HTML)
- React使用JSX语法，Model的修改会同步到View，View修改则需要使用事件监听的形式来手动修改Model，单向依赖
- Vue使用Mustache模板，MVVM模式双向绑定
2). ViewModel
- React在组件的实例上声明state对象作为ViewModal，使用setState声明式的方法触发view变化渲染
- Vue的data、props、computed方法执行的返回值会被代理映射到this实例上，直接修改this上代理监听的数据自动会触发双向绑定，引起view变化；computed初次执行在beforeMount中，也是就是在create之后
3). 发起异步请求
- React在componentDidMount()中，当props变化引起需要重新发请求时，只能通过getDerivedStateFromProps和componentDidUpdate配合使用（这样做太过繁琐，一般考虑折中的办法，从用户操作的角度考虑在某些地方发起请求）
- Vue一般在created或者 beforeRouteEnter 中发起请求，还可以使用watch监听相关异步请求参数的变化来发起请求vue-router
4). props
- React访问props需要通过this.props；react想把props保存一份在自己组件state，需要使用getDrivedStateFromState，或者在constructor里
- Vue的props需要在子组件内用props声明，或者进行类型检查;Vue直接通过代理绑定到this上，访问直接this.xxx就行了；vue直接在data里直接把props赋值给data的属性就可以了
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
5). React绑定this
- React需要手动bind(this)或者使用箭头函数
- Vue在method中定义，不能使用箭头函数
6). JSX语法绑定监听函数
- React
<Button onClick={() => this.showModal('create')} />// 定义新的函数
<Button onClick={this.handleDelete} /> // 函数引用，会接受一个event
// 这样写会死循环，{}里的是js语句，在渲染时就会执行，而不是点击的时候
<Button onClick={this.handleDelete()} />
- Vue更像原生HTML
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
7). 嵌套组件和插槽
- React JSX中可以直接渲染数组 this.props.children，也可以this.props.children[0],this.props.children[1]分开分别引用
- Vue插槽
8). vuex和redux代替方案
- React使用context，使用Context.Provider包裹根组件，在使用的组件的render函数中用costumer使用；或者使用Class.contextType在生命周期函数中使用（可以查看react中文官网）；一般把要共享的数据放在根组件的state上，并且把更改state的函数放到context上，通过这样的方式来在子组件上更新context的数据
- Vue 使用provider/inject来实现组件树的共享数据，但是是非响应式的，使用Vue.observerable方法返回的响应式对象data上，然后放到provider上，则在子组件修改响应式对象可以实现响应式渲染(或者vue直接使用vue.observerable实现状态管理)
9). vue有更多的API
- vue自定义事件
- vue nextTick
2. 路由
1). 路由配置
- React-Router4 路由也是组件，没有集中配置，分散在组件之中
- Vue 集中配置
2). 授权路由
- React-Router 4 自定义授权组件，antd pro中使用render props进行控制，Router render props
- Vue 导航守卫
3. 状态管理
1). 获取store上的数据
- React需要通过connect函数注入mapStateToProps
- Vue 在computed中通过return this.$store.state.count获取，或者mapState函数
网友评论