vue异步请求和同步_VUE知识点集锦

最新推荐文章于 2024-07-23 16:26:53 发布

weixin_40005437

最新推荐文章于 2024-07-23 16:26:53 发布

阅读量1.9k

点赞数 1

文章标签： vue异步请求和同步

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这个是真正的销毁