什么是基于数据驱动的前端框架？

Question

经常看到介绍 Angular,Vue的介绍是“数据驱动”的前端框架，那到底什么是“数据驱动”呢？相对于数据驱动，还有什么驱动类型呢？希望大家不吝赐教。

Answer 1

强答一波，说说我的理解，希望对你有帮助。

---

首先，“数据驱动” 是一种编程范式(Programming Paradigm)，相似的有很多，详情可以参考这里：https://en.wikipedia.org/wiki...

---

如果只谈前端，那么问题就会简化很多，一般来说，会比较 “数据驱动” 与 “事件驱动”。数据驱动思想的出现一定程度上弥补了事件驱动的不足。

先说事件驱动，一个很典型的例子就是 jQuery。用 jQuery 开发的页面执行初期就像这样：

通过特定的选择器查找到需要操作的节点 -> 给节点添加相应的事件监听

响应用户操作，效果是这样：

用户执行某事件（点击，输入，后退等等） -> 调用 JavaScript 来修改节点

这种模式，对于业务需求简单的页面来说没什么问题。只是现在前端越来越复杂，光用这样的模式已经满足不了很多大型项目的需求。另一方面，找节点和修改节点这件事儿，效率本身就很低。因此出现了数据驱动模式，我们就拿其中的一种，MVVM 来举例子，执行初期就像这样：

读取模板，同时获得数据，并建立 VM(view-model) 的抽象层 -> 在页面进行填充

要注意的是，MVVM 对应了三个层，M - Model，可以简单的理解为数据层；V - View，可以理解为视图，或者网页界面；VM - ViewModel，一个抽象层，简单来说可以认为是 V 层中抽象出的数据对象，并且可以与 V 和 M 双向互动（一般实现是基于双向绑定，双向绑定的处理方式在不同框架中不尽相同）。
针对用户的操作，大致是这样：

用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应位置的数据

总结一下，可以简单的这么去理解：数据驱动不是操作节点的，而是通过虚拟的抽象数据层来直接更新页面。我觉得，主要就是因为这一点，数据驱动框架才得以有较快的运行速度（因为不需要去折腾节点），并且可以应用到大型项目。

Answer 2

不操作DOM，用数据来渲染

Answer 3

vue就是可以用数据驱动

举个小例子、

在某些节点上做三元运算 class对应data的两种状态

当data改变、对应的watch会发现变动、改变对应的class

我们并没有操作节点、而是操作了数据从而间接改变了样式