MVVM模式
核心理念：
通过声明式的数据绑定 来实现 View 层和其他层的分离；
Model 层
Model 层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。（域模型：融合了行为和数据的域的对象模型）
View 层
View 层，作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明。
ViewModel 层
ViewModel 层把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。
模式
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。（Observer：数据监听器,观察者；Compile：指令编译器；Watcher：订阅者；）
VUE的生命周期
var app = new Vue({})
所有的Vue应用都是从这里开始的，当实例化出Vue对象时就已经进入了Vue的生命周期。
1）进入的生命周期第一个钩子函数就是beforeCreate。在这之前组件还没有真正的初始化。
2）在beforeCreate之后，Vue对data对象作了getter/setter处理，并且将对象放在一个Observe里面以便于监控对象，另外还有使用initEvents绑定事件
3）在组件初始化完成后，遇到第二个钩子函数：created。在这个阶段我们可以访问到了data的属性以及绑定的事件
4）通过了created阶段后组件的生命周期到了beforemount，在这个阶段DOM结构还没有生成，但是已经创建了el，组件挂载的根节点。在beforemount执行完成后开始渲染DOM，执行_render方法，_mount方法，然后会有new出一个watcher对象,形成VNode节点，然后会更新DOM
5）渲染完毕后组件就会到了下一个生命周期mounted，一般的异步请求都会写在这，这个阶段DOM已经渲染出来了。至此一个组件已经完整的出现在眼前了，但是生命周期却还没有停止。
6）当组件需要更新的时候生命周期会先到达beforeUpdate,在这个阶段显示数据并没有更新，但是DOM中的数据已经改变了，这是因为双向绑定的关系
7）走过beforeUpdate组件完成了更新，生命周期走到updated
8）完成更新后的组件应该被销毁了，beforeDestroy，这个阶段组件还没有被销毁
destroy这个是真正的销毁
Computed和watch的区别
Computed: -->计算属性
1支持缓存，只有依赖数据发生改变，才会重新进行计算
2）不支持异步
3）如果一个属性是由其他属性计算而来，这个属性依赖其他属性，多对一（多个值影响一个值）的情况一般用computed；
Watch: -->监听属性
监听属性；一定是存在的属性；是data中的属性；
1）不支持缓存，数据变化，直接会触发相应的操作
2）支持异步
3）当一个属性发生变化时，需要执行对应的操作；一对多（一个值影响多个值）的情况一般用watch；
微信关注：Web前端小白的全栈之路
网友评论