初识Vue

一. 单页面应用
目前主流的前端框架都是属于单页面应用总结起来几大特点:

(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化

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

  2. 单页应用的体验,局部组件更新界面,让用户体验更快速省时。

  3. 单页应用也称为SPA是将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。加载完成,页面不在重新加载或跳转,仅仅是里面的组件或模块通过hash,或者history。

    api来进行交互和跳转,并通过ajax拉取数据来实现响应功能,整个应用就一个html,所以叫单页面!

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


二. mvvm MVVM是Model-View-ViewModel的简写

Model 数据层 View 界面

ViewModel 数据和界面的结合版    ps:处理视图逻辑

ViewModel 如何实现的 通过的是es5 里面的getter setter

示意图中可以看出双向数据流:

View将变动通知到ViewModel,然后ViewModel对Model进行更新。

其中最核心的功能是对视图(View)和模型(Model)变动的监听。

三: Vue数据驱动(双向数据绑定)的原理?
什么是数据驱动

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

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

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

双向绑定
V-model事件监听这种属性,界面(view)和数据(model)会同时发生变化。

首先,vuejs在实例化的过程中,会对实例化对象选项中的data 选项进行遍历,遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。同时每一个实例对象都有一个watcher实例对象,他会在模板编译的过程中,用getter去访问data的属性,watcher此时就会把用到的data属性记为依赖,这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变(即数据的setter被调用)的时候,watcher会对比前后两个的数值是否发生变化,然后确定是否通知视图进行重新渲染这样就实现了所谓的数据对于视图的驱动。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。


猜你喜欢

转载自blog.csdn.net/qq_38017417/article/details/80116942