data和props

事件驱动

在前端来说数据驱动式框架，必然离不开事件驱动，事件驱动一定程度弥补了数据驱动的补足，在dom操作的时代同上都是这样操作：

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

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

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

这种模式对业务来说是没有什么问题，但是从开发承办和效率来说会比较力不从心，在业务系统越来越庞大的时候，就显得复杂了。另一方面，找节点和修改节点这件事，效率半身就很低，因此出现了数据驱动模式。

数据驱动

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

要主要的是，mvvm对三个层 M-Model，可以简单理解为数据层；V-view，可以理解为视图，或者网页界面； VM - ViewModel,一个抽象层，简单来说可以认为是V层中抽象出的数据对象，接且可以与V和M双向互动(一般实现的是基于双向绑定，双向绑定的处理方式在不同框架中不尽相同)。

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

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

Vue 模式

Vue 通过{{}}绑定文本节点，data里动态数据与Props静态数据进行一个映射关系，当data中的属性或者props中的属性有变动，以上两者里的每个数据都是行为操作需要的数据或者模板 view 需要渲染的数据，一旦其中一个属性发生变化，则所有关联的行为操作和数据渲染的模板上的数据同一时间进行同步变化，这种基于数据驱动的模式更简便于大型应用开发。只要合理的组织数据和代码，就不会显得后续皮软。

何为动态数据 data，何为静态数据 props

Data 被称之为动态数据的原因，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。

Props 被称之为静态数据的原因，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型。

更为关键地是，对数据单向流的理解，props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据。

data 选项
当一个实例创建的时候，Vue会将其响应系统的数据放在data选项中，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。初始定行的行为代码也都会随着响应系统进行一个映射。

而 data 选项中的数据在实例中可以任意改变，不受任何影响，前提必须数据要跟逻辑相辅相成。