Vue 程序结构框架

Vue.js是典型的MVVM框架,什么是MVVM框架,介绍之前我们先介绍下什么是MVC框架

MVC 即 Model-View-Controller 的缩写,就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成的:

View 用来把数据以某种方式呈现给用户。

Model 其实就是数据。

Controller 接收并处理来自用户的请求,并将 Model 返回给用户。

MVC框架对于简单的应用处理是可以的,也符合软件架构的分层思想。但随着H5 的不断发展,人们更希望使用H5 开发的应用能和Native 媲美,或者接近于原生App 的体验效果,于是前端应用的复杂程度已不同往日,今非昔比。这时前端开发就暴露出了三个痛点问题:

  • 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ,操作冗余,使得代码难以维护。
  • 大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。
  • 当 Model 频繁发生变化,开发者需要主动更新到View ;当用户的操作导致 Model 发生变化,开发者同样需要将变化的数据同步到Model 中,这样的工作不仅繁琐,而且很难维护复杂多变的数据状态。

其实,早期jquery 的出现就是为了前端能更简洁的操作DOM 而设计的,但它只解决了第一个问题,另外两个问题始终伴随着前端一直存在。随着智能手机,平板电脑的流行,多终端开始流行。

MVVM框架开始流行,应用场景:

  • 针对具有复杂交互逻辑的前端应用
  • 提供基础的架构抽象
  • 提供ajax数据持久化,保证前端用户体验

框架数据分层情况:

  • Model 层代表数据模型,可以在Model中定义数据修改和操作的业务逻辑
  • View 代表展示层,它负责将数据模型转化成UI 展现出来
  • ViewModel 是一个同步View 和 Model的对象

图例介绍:

  • Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。
  • Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
  • Watcher 订阅者, 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
  • Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。

图中思路:从图中可以看出,当执行 new Vue() 时,Vue 就进入了初始化阶段,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能;另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。

当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。

Vue框架构造的更多相关文章

  1. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  2. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  3. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  4. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  5. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  6. Vue框架

    Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...

  7. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  8. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  9. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

随机推荐

  1. centos 7 ifconfig无法找到命令的方法

    场景:新安装centos   没有安装. centos7.2的mini版没有安装这个东东,所以我们就直接安装就好了,在终端里面输入: yum -y install net-tools

  2. JAVA父类的静态方法能否被子类重写?

    静态: 在编译时所分配的内存会一直存在(不会被回收),直到程序退出内存才会释放这个空间,在实例化之前这个方法就已经存在于内存,跟类的对象没什么关系.子类中如果定义了相同名称的静态方法,并不会重写,而应 ...

  3. ThreadLocal的认知与见解

    ThreadLocal:提高一个线程的局部变量,访问某个线程拥有自己局部变量(很难理解.看看下面这句话,顺便再讲个例子). 当使用ThreadLocal维护变量时,ThreadLocal为每一个使用该 ...

  4. spring mvc Response header content type

    Xml代码 <bean class ="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAd ...

  5. StringBuilder和StringBuffer的区别

    Java中StringBuilder和StringBuffer的区别分析 StringBUilder是线程不安全的(线程同步访问的时候会出问题),但是效率相对较高. (String类型使用加号进行拼接 ...

  6. SQLServer的网络协议

    一.总结 1.SQL Server访问协议包括Shared Memory.Named Pipes.TCP/IP.VIA四种,多数应用系统都是通过TCP/IP协议访问数据库.安装数据库后需要启用TCP/ ...

  7. TestNG(六) 忽略测试

    package com.course.testng.suite; import org.testng.annotations.Test; public class IgnoreTest { @Test ...

  8. 06: RGB、YUV和HSV颜色空间模型

    RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha的色彩空间 YUV:Y"表示明亮度(Luminance或Luma),也就是灰阶值:而"U"和&q ...

  9. 18 (OC)* RunTime

    目录: 一.怎么理解OC是动态语言,Runtime又是什么?二.理解消息机制的基本原理三.与Runtime交互的三种方式四.分析Runtime中的数据结构五.深入理解Rutime消息发送原理六.多继承 ...

  10. python9

    v> 软件测试 广州博才科技开发有限公司 迅捷PDF编辑器 3.5 集合 学习目标: 1. 能够说出如何创建集合 2. 能够说出字典和集合的区别 3. 能够说出如何向集合中添加元素 4. 能够说 ...