一、对MVC、MVVM、MVP的理解
——MVC
M 表示 Model,专门用来处理数据模型。
V 表示 View,专注页面布局和数据显示。
C 表示 Controller 专注于控制,执行业务逻辑,操作模型和视图。
MVC的数据之间通信都是单向的
View(视图层)传达指令到Controller(控制层)
Controller(控制层)完成业务逻辑后,要求Model(模型层)改变状态
Model(模型层)将新的数据发送到View(视图层),用户得到反馈
在MVC中,虽然View与Model之间的耦合度非常小,只需要Model修改的时候通知View发生改变即可,但是它们之间还有很重要的联系,于是,就有了MVP
——MVP
M 表示Model,专门用来处理数据模型
V 表示View,专门用来处理用户视图
P 表示Presenter,用来处理业务逻辑,在MVC的基础上,修改了通信方向
MVP中,View和Model之间没有任何通信关系,所有的通信和业务逻辑都放在Presenter层中
View(视图层)发送指令到 Presenter层
Presenter层 处理业务逻辑,要求Model(模型层)改变状态
Model(模型层)修改状态之后,发送指令到Presenter层
Presenter层通知View(视图层)做出改变
MVP中,所有的通信都是双向的,View和model不会直接发生通信,都通过Presenter层进行传递
在MVP中,所有的业务逻辑都写在Presenter层中,会导致Presenter层过于臃肿
在MVP中,View只负责显示视图,不包含任何业务逻辑,导致View层过薄,不具备任何主动性
由于在MVP模式中,所有的业务逻辑都放在Presenter层中,必须通过Presenter层来修改View层的界面,所以出现了MVVM
——MVVM
M 表示Model,专门用来处理数据模型
V 表示View,专门用来处理用户视图
VM表示ViewModel,用来使的View视图层与Model层双向绑定,View的任何变动都会通知ViewModel,而Model的任何变动,也都会通知ViewModel,而不论哪一项发生改变,都会使对应的视图/数据模型同步发生改变
在MVVM中,于MVP一样,所有的通信都是双向的,数据与视图不直接发生依赖,全部通过VM层来进行双向绑定
所有的业务逻辑都由VM来进行处理,但是在View层和Model层修改都会通过VM来双向的绑定修改
Vue生命周期
什么是生命周期:
Vue实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据,编译模板、挂在Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。
beforeCreated(实例创建前)
在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el和data并未初始化,因此无法访问methods,data,computed等上的方法和数据。
created(实例创建后)
实例已经创建完成之后被调用,在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data数据的初始化,el没有。然而,挂在阶段还没有开始,$el属性目前不可见,这是一个常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过Vue的响应式绑定体现在页面上,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成
beforeMount(实例挂载前)
挂在开始之前被调用,相关的render函数首次被调用(虚拟Dom),实例已完成以下的配置:编译模板,把data里面的数据和模板生成html,完成了el和data初始化,注意此时还没有挂在html到页面上。
mounted(实例挂载完成)
挂载完成,也就是模板中过的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。
beforeUpdate(更新前)
在数据更新前之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程
updated(更新后)
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用
beforeDestrioy(销毁前)
在实例销毁之前调用,实例仍然完全可用
- 这一步还可以用this来获取实例
- 一般在这一步做一些重置的操作,比如清除掉组件中的定时器和监听的dom事件
destroyed(销毁后)
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
三、computed 和 watch的区别
计算属性(computed)
官方对于计算属性的解释是:
对于任何复杂逻辑,你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新赋值。
直接引用官方文档的例子:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
侦听器(watch)
Vue通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式时最有用的。
官方文档很清晰地表达了,watch是在执行一些复杂的操作时候使用的。更直观的例子,我们可以看下官方对computed和watch的对比:
以下代码是针对fullname这个属性的监听:
<div id="demo">{{ fullName }}</div>
使用watch:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
使用computed:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
可以明显的看出,在执行简单的计算操作时,computed比watch更简洁易读。
总结:
- 如果一个数据依赖于其他数据的简易计算处理的,那么使用computed比较合适。
- 如果需要在某个数据变化时做一些事情,使用watch来观察这个数据变化
参考资料:
Vue–计算属性和侦听器
未完待续…