谁能给我详细解释一下‘数据驱动的视图’?

RT,其实之前遇到过,然后最近看vue.js官网也是这句话。
我很想知道数据驱动的视图到底是什么意思,vue对它的实现方法是什么?
请有经验的大神帮助

回答:

“上古时代”我们操作视图的基本步骤是:

  1. 获取 DOM 对象(大多用 jQuery)

  2. 获取数据(用任何可能的途径,Ajax 很常见)

  3. 用新的数据“修改” DOM 对象,或者用新的数据创建新的 DOM 对象(HTML 字符串/模板+数据对象)

  4. 更新 DOM

这个时候是不存在所谓“视图层”的——视图有,就是我们看得见摸得着的 DOM,但是没有框架层面的抽象视图层,对于视图的操作基本就是纯手工作坊式的。按照今天的话说这叫:以 DOM 为中心。

这种方式的缺点太多了,其中最重要的有两个:

  1. 视图没有设计良好的抽象层,你很难有条理的,层次结构分明的去构建 UI 视图

  2. 一切基于 DOM 的操作带来的是性能上的种种问题,因为 DOM 本身很重

然后有人就说了:我们开发应用其实关注的不应该是 DOM,而是数据本身,DOM 只是数据在浏览器里的具体呈现罢了(加上用于表征结构的 HTML 和表征视觉呈现的 CSS 等)。那么我们为什么要穷尽智慧和力气去和 DOM 徒手肉搏呢?我们为什么不能让框架/库为我们做这些事情,好让我们把注意力集中在数据层呢?(其实也就代表着业务逻辑,当数据流转到应用层时,它就是业务逻辑的负载)

于是传统的 MVC 分层理论就以各种各样的方式进入了前端开发的世界……这中间的细节就不多说了。

总之到了今天,像 vue.js 这样的现代框架就是做到了把 DOM 相关的事情隐藏到了框架底层并实现了高度的抽象设计和自动化操作(其实更重要的是对于状态的管理,等你再进阶一些就会体会到 DOM 操作的复杂性终究来源于无序状态的管理),所以作为应用开发者可以最大程度的只把精力放在数据层,也就是具体的业务逻辑上以及 UI 编程上去。

这就是数据驱动视图,你关注数据,框架替你处理视图操作。

回答:

长话短说,各种宣称这种理念的框架尽可能让你把精力放到数据操作上,当你修改数据状态时帮你完成数据的更新。这类技术要求你描述视图上的数据渲染逻辑(比如某段文字是哪个数据控制),然后你再把数据绑定到视图上,接下去的复杂的刷新界面就由框架帮你完成了。 Vue 实现用的是 ES5 的 observer ,监视数据的状态,当数据改变时使用安插好的回调函数去刷新界面。

更详细的内容可以参看这篇 http://jiongks.name/blog/vue-code-review/

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注