浅谈vuejs实现数据驱动视图原理


Posted in Javascript onFebruary 23, 2018

什么是数据驱动

数据驱动是vuejs最大的特点。在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

比如说我们点击一个button,需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中,对于页面的修改我们一般是这样的一个流程,我们对button绑定事件,然后获取文案对应的元素dom对象,然后根据切换修改该dom对象的文案值。

而对于vuejs实现这个功能的流程,只需要在button元素上指明事件,同时声明对应文案的属性,点击事件的时候改变属性的值,对应元素的文本就能够自动的进行切换,我们不需要像以前那样手动的操作dom。

简而言之,就是vuejs帮我们封装了数据和dom对象操作的映射,我们只需要关心数据的逻辑处理,数据的变化就能够自然的通知页面进行页面的重新渲染。

这样做的确实给我们带来的好处,我们不需要再在代码中频繁地去操作dom了,在实际项目中,我们有很大部分代码都是在数据修改以后,手动操作重新渲染页面元素,当页面越来越复杂的时候,页面代码组织会越来难以维护。同时,js对dom的频繁操作,会使得页面代码的出错概率高,页面的视图展示会融合在js代码中,对于页面视图显示的升级也不友好。

那么vuejs是如何实现这种数据驱动的呢?

MVVM框架

Vuejs的数据驱动是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。

Model:指的是数据部分,对应到前端就是javascript对象

View:指的是视图部分,对应前端就是dom

Viewmodel:就是连接视图与数据的中间件

浅谈vuejs实现数据驱动视图原理

数据(Model)和视图(View)是不能直接通讯的,而是需要通过ViewModel来实现双方的通讯。当数据变化的时候,viewModel能够监听到这种变化,并及时的通知view做出修改。同样的,当页面有事件触发时,viewMOdel也能够监听到事件,并通知model进行响应。Viewmodel就相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作。

Vuejs的数据驱动实现

对于数据驱动的实现,我们可以简单的通过定时器来实现这个功能,定时器定时监控对象数据,定时器监控数据变化,确定是否更新界面

a = 1;
  function renderDom(){
    document.getElementById('app').innerHTML = '数据是' + a;
  }
  
  function watcher(method){
    var b = a;
    method.apply();
     return setInterval(function(){
      if(b != a){
        method.apply();
        b = a;
      }
    }, 1000)
  }
  watcher(renderDom);

当然vuejs不可能是这样简单暴力的实现方式,vuejs是通过在实现一个观察者来实现的数据驱动。

浅谈vuejs实现数据驱动视图原理

首先,vuejs在实例化的过程中,会对遍历传给实例化对象选项中的data 选项,遍历其所有属性并使用 Object.defineProperty把这些属性全部转为 getter/setter。

同时每一个实例对象都有一个watcher实例对象,他会在模板编译的过程中,用getter去访问data的属性,watcher此时就会把用到的data属性记为依赖,这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变(即数据的setter被调用)的时候,watcher会对比前后两个的数值是否发生变化,然后确定是否通知视图进行重新渲染。

这样就实现了所谓的数据对于视图的驱动。

关于代码的实现,可以参考一下这篇文章 实现vue2.0响应式的基本思路

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue实现图片上传功能
May 28 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
vue中动态绑定表单元素的属性方法
Feb 23 #Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 #Javascript
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php实现两个数组相加的方法
2015/02/17 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python获取当前时间的方法
2014/01/14 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
实习自荐信
2013/10/13 职场文书
销售行政专员职责
2014/01/03 职场文书
2014年卫生工作总结
2014/11/27 职场文书
自荐信模板大全
2015/03/27 职场文书
检讨书模板大全
2015/05/07 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
如何用python绘制雷达图
2021/04/24 Python
python基础之类属性和实例属性
2021/10/24 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python