数据驱动视图简单实现

数据驱动视图简单实现

前端框架日新月异，Angularjs的MVVM模式风靡全球，React的MV模式也被大家捧得火热。我不知道有多少人在使用Vue.js，这也不重要，框架对于前端从业人员而言绝对是提升效率的利器，各种框架/各种库帮我们解决了大量的繁琐工作/兼容性工作。

最近在一个移动端项目中想去使用Vue.js，那必然会跟跟当下其他比较火热的框架进行一个比较，具体的比较过程大家也可以从 是否能完成需求/库文件的大小/社区活跃度/稳定性/性能/团队技术特点 等等方面去观测，这里不再去赘述。

今天的题目是“数据驱动视图简单实现”，我们知道Angularjs号称数据双向绑定，也就是说数据模型中数据发生改变时相应的视图也会跟随发生改变，而Vuejs也是如此，并且称自己不用像Angularjs那样做数据脏检查。那我们先看看数据脏检查是什么意思

脏检查 即一种不关心你如何以及何时改变的数据， 只关心在特定的检查阶段数据是否改变的数据监听技术.

那既然Vuejs不使用这种轮巡式的检测方式，它使用的是什么方式呢？没错，就是事件触发式。它不会去劳心费力地做一些无用功，当数据发生变化时，直接给Vuejs打个电话，让它去看看是否需要进行下一步处理即可。

为了更好地去理解这种机制，我们取了一个很唬人的标题，当然唬人不是骗人，下面我们就来简单实现一个demo，当数据变动时去自动更新视图。

首先，我们在页面上放置一个简单的视图

<