论vuejs实现数据驱动视图的原理

什么是数据驱动

数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动是指当数据发生变化时，用户界面也随之发生变化，开发者不需要手动修改dom。

比如我们点击一个按钮，需要元素的文本在是和否之间切换，在jquery刀耕火种的时代，我们通常会有这样一个页面修改的过程。我们将事件绑定到按钮，然后获取副本对应的dom对象，然后根据开关修改dom对象的副本值。

至于vuejs实现这个功能的过程，我们只需要在button元素上指明事件，并声明对应副本的属性。单击事件时，属性值会发生变化，相应元素的文本可以自动切换。我们不需要像以前那样手动操作dom。

简而言之，vuejs帮助我们封装数据和dom对象操作之间的映射。我们只需要关心数据的逻辑处理，数据的变化自然可以通知页面重新渲染页面。

这确实给我们带来了好处。我们不再需要在代码中频繁操作dom。在实际项目中，我们的大部分代码在数据修改后手动重新呈现页面元素。随着页面变得越来越复杂，页面代码组织将变得越来越难以维护。同时，js对dom的频繁操作会使页面代码出错概率变高，页面视图的显示会被集成到js代码中，对页面视图显示的升级并不友好。

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

MVVM框架

Vuejs的数据驱动由MVVM框架实现。MVVM框架主要包括三个部分：模型、视图和视图模型。

Model:指的是数据部分，对应的前端是javascript对象

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

视图模型：是连接视图和数据的中间件

数据(模型)和视图(视图)不能直接通信，但它们需要通过视图模型相互通信。当数据发生变化时，viewModel可以监听变化，并通知view及时做出改变。同样，当页面被事件触发时，viewMOdel也可以监听事件并通知模型做出响应。Viewmodel相当于一个观察者，监视双方的动作，并及时通知对方采取相应的动作。

Vuejs的数据驱动实现

对于数据驱动的实现，我们可以简单的通过定时器来实现这个功能，定时监控对象数据，监控数据变化，决定是否更新接口。

a=1；函数render DOM(){ document . getelementbyid(' app ')。innerhtml=“数据是”a；}函数观察器(方法){ var b=a；method . apply()；返回setInterval(函数(){ if(b！=a){ method . apply()；b=a；} }，1000) }观察者(RenderDom)；当然，vuejs不可能是这么简单暴力的实现，vuejs是通过实现一个观察者来驱动数据的。

首先，在实例化过程中，vuejs将遍历传递给实例化对象选项中的data选项，遍历它的所有属性，并使用Object.defineProperty将所有这些属性变成getter/setter。

同时，每个实例对象都有一个观察器实例对象，他会在模板编译过程中使用getter来访问数据的属性。此时，观察者将记录作为依赖项使用的数据属性，从而建立视图和数据之间的连接。当我们渲染的视图的数据依赖关系后来发生变化时(即调用数据的setter)，watcher会比较前后两个值是否发生变化，然后决定是否通知视图重新渲染。

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

关于代码的实现，可以参考本文中实现vue2.0响应的基本思想

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。