您的位置:首页 > 产品设计 > UI/UE

怎么理解VUE,VUE的数据驱动原理是什么,解释MVVM框架

2018-01-30 18:06 776 查看
一:Vue是什么,怎么理解Vue

Vue是一个基于MVVM模式数据驱动页面的框架,它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点:
(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
vue靠数据驱动双向绑定使我们开发页面更简单,开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定,底层是通过Object.defineProperty()
定义的数据 set、get 函数原理实现。
<
4000
div style="white-space:pre-wrap;line-height:1.75;font-size:14px;">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是如何实现这种数据驱动的呢?
首先,vuejs在实例化的过程中,会对实例化对象选项中的data
选项进行遍历,遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。同时每一个实例对象都有一个watcher实例对象,他会在模板编译的过程中,用getter去访问data的属性,watcher此时就会把用到的data属性记为依赖,这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变(即数据的setter被调用)的时候,watcher会对比前后两个的数值是否发生变化,然后确定是否通知视图进行重新渲染这样就实现了所谓的数据对于视图的驱动。通俗地讲,它意味着我们在普通
HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
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就相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: