1. MVVM? 对比MVC
MVVM(Model-View-ViewModel):
Model: 数据模型,可以定义数据修改和操作的业务逻辑
View: UI组件,将数据组件转换成UI展示
ViewModel: 同步View和model的对象
View和Model没有直接的联系,通过ViewModel进行交互, ViewModel通过双向数据绑定把View层和Model层联系起来,View和Model的同步完全自动,开发人员只需关心业务逻辑,不用手动更新DOM元素,
也不用关注数据状态的同步,复杂的数据状态完全由MVVM管理
2. 生命周期
创建前后(beforeCreated/created):beforeCreated阶段,vue实例挂在元素
此阶段el和data都是undefined,未初始化,created阶段,vue实例的数据对象data就有了,但是el还没有
载入前后(beforeMounted/mounted): beforeMounted阶段,vue实例的$el和data都已经初始化,但还是挂载之前的虚拟DOM节点,data.message还未替换,
mounted阶段,挂载实例完成,data.message成功渲染
更新前后,data发生变化时,会触发beforeUpdate和updated方法
销毁前后,在执行destroy方法后,对data的改变不会再触发生命周期函数,此时vue实例已经解除事件监听及DOM的绑定,但DOM结构依然存在
3. 父子间通信
MVVM(Model-View-ViewModel):
Model: 数据模型,可以定义数据修改和操作的业务逻辑
View: UI组件,将数据组件转换成UI展示
ViewModel: 同步View和model的对象
View和Model没有直接的联系,通过ViewModel进行交互, ViewModel通过双向数据绑定把View层和Model层联系起来,View和Model的同步完全自动,开发人员只需关心业务逻辑,不用手动更新DOM元素,
也不用关注数据状态的同步,复杂的数据状态完全由MVVM管理
2. 生命周期
创建前后(beforeCreated/created):beforeCreated阶段,vue实例挂在元素
此阶段el和data都是undefined,未初始化,created阶段,vue实例的数据对象data就有了,但是el还没有
载入前后(beforeMounted/mounted): beforeMounted阶段,vue实例的$el和data都已经初始化,但还是挂载之前的虚拟DOM节点,data.message还未替换,
mounted阶段,挂载实例完成,data.message成功渲染
更新前后,data发生变化时,会触发beforeUpdate和updated方法
销毁前后,在执行destroy方法后,对data的改变不会再触发生命周期函数,此时vue实例已经解除事件监听及DOM的绑定,但DOM结构依然存在
3. 父子间通信