如何理解vuejs数据驱动

本篇文章为大家展示了如何理解vuejs数据驱动，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站于2013年成立，是专业互联网技术服务公司，拥有项目做网站、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元永康做网站,已为上家服务,为永康各地企业和个人服务,联系电话:18982081108

在vuejs中，数据驱动是指当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom；简单来说就是通过控制数据的变化来改变DOM，让视图（DOM）的内容随着数据的改变而改变。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

一：Vue是什么，怎么理解Vue

Vue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。

总结起来的几大特点：

• 简洁

• 轻量

• 快速

• 数据驱动

• 模块友好

• 组件化

vue靠数据驱动双向绑定使我们开发页面更简单，开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定，底层是通过Object.defineProperty() 定义的数据 set、get 函数原理实现。

2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高。

3、单页应用的体验，局部组件更新界面，让用户体验更快速省时。

单页应用也称为SPA是将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。加载完成，页面不在重新加载或跳转，仅仅是里面的组件或模块通过hash,或者history api来进行交互和跳转，并通过ajax拉取数据来实现响应功能，整个应用就一个html，所以叫单页面！

4、js的代码无形的规范，团队合作开发代码可阅读性更高。

二： Vue数据驱动（双向数据绑定）的原理？

什么是数据驱动

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

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

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

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

对getter/setter的理解？

当打印出Vue实例下的data对象里的属性，它的每个属性都有两个相对应的get和set方法，顾名思义，get为取值，set为赋值，正常情况下，我们取值和赋值是用obj.prop的方式，但是这样做有一个问题，我如何知道对象的值改变了？所以就轮到set登场了。你可以把get和set理解为function，当我们调用对象的属性时，我们会进入到get.属性(){...}中，先判断对象是否有这个属性，如果没有，那麽就添加一个name属性，并给它赋值；如果有name属性，那就返回name属性。你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。感觉比较重要的是set属性，当给实例赋值：此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，就可以做很多事了，比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。ES5的对象原型有两个新的属性__defineGetter__和__defineSetter__，专门用来给对象绑定get和set。建议使用下面这种方式，因为是在原型上书写，所以可以继承和重用。

三：MVVM框架

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

• Model:指的是数据部分，对应到前端相当于javascript对象

• View:指的是视图部分，对应前端相当于dom

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

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

上述内容就是如何理解vuejs数据驱动，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。