潜入理解MVVM＆Vue-CSDN博客

关于MVVM

MVC

MVC即为Model + View + Controller的一种软件架构。View为前端视图，和用户直接打交道的；Model是数据模型，可以理解为数据库持久化存储；Controller即为连接Model和View之间的业务逻辑控制器。

当用户在View视图页面修改了数据，通过Controller控制器完成对Model对象的更新、修改。
用户请求某url，也是通过Controller访问数据的
整个流程可以这么理解：View前端界面更新-Controller控制器处理-更新Model数据-数据更新后通过Controller返回View-View页面中体现出更新

MVVM

当前端业务逻辑不断扩大···前端数据、业务更加复杂的时候，DOM操作肯定会增加如果按照以前的方式直接操作DOM性能会差。于是前端大佬们将数据Model与页面View分离，当数据更新的时候DOM自动更新，如果页面有更新Model也要同步更新，MVVM模式应运而生。在学习软件工程的时候，我们知道要降低耦合，将Model、View分离也是在解耦操作。

MVVM = Model + View + ViewModel

MVVM做的是将View与Model之间联系彻底剥离，任何数据同步都交由ViewModel处理。对视图的修改以及数据的更新都通过ViewModel实现同步。

Vue双向绑定的原理（Vue不支持IE8的原因）

何为双向绑定

视图更新会同步更新Model
同时Model更新也会在视图上同步

双向绑定的原理

Observer监听数据，数据有更新的话会通知订阅者Watcher
Compile指令解析，编译指令，更新视图
Watcher订阅并收到每个属性变化的通知，执行相关回调函数，更新视图

Vue的生命周期

beforeCreate：实例初始化之后，在数据监听以及编译模板之前
created：实例化完成，数据监听已绑定，DOM还未生成，$el不存在
beforeMounted：编译模板，$el存在（render首次调用），但页面没有内容（尚未挂载）
mounted：将编译好的HTML替换掉el指向的DOM，挂载完成，页面中有内容了
beforeUpdate：监控到数据变化，组件更新之前；（数据更新了，但是虚拟DOM还没重新渲染）
updated：组件更新之后；（虚拟DOM已经重新渲染&打补丁）
beforeDestory：实例销毁之前
destoryed：实例销毁完成
activated：keep-alive组件激活时调用
deactivated：keep-alive组件停用时调用

Vue中的Virtual DOM（虚拟DOM）

前面说到采用MVVM可以实现双向绑定，减少数据更新频繁时，DOM随之频繁操作的问题。可是当数据更新时，视图的渲染依然需要更新DOM树。DOM非常非常大，如果直接对DOM进行处理性能可能会受影响，于是聪明的FEer想到采用js对象模拟DOM树，也就是虚拟DOM。

当然如果每次视图更新都要渲染整棵DOM树工作量依然很大。于是乎，每次渲染之前对新旧两棵树进行对比diff()。差异更新到相应的位置。

对Vue组件的理解

组件，我们可以为是一个自定义、可复用的代码段，都有其特定功能。Vue组件也是Vue实例，如header、footer。而且，组件间是可以通信的。

单文件组件

单文件组件就是一个vue文件就是一个组件，一个文件可以导出一个组件。

组件中data必须是函数

data为函数，不同地方使用这个组件时，可以让这个数据私有。

// 如果data不是函数
let component1 = new MyComponent()
let component2 = new MyComponent()

component1.data.title = '123'
// 此时component2的data的title属性也会跟着变化
// 所以两个实例的data必须有自己的域
复制代码