js：浅谈js的事件驱动和数据驱动

概述

随着大前端时代的到来，我们从 jquery 到 react，vue 等框架的转变，其实就是事件驱动到数据驱动的思维模式的转变

事件驱动

事件：用户点击按钮就是一个事件
构建页面：设计DOM => 生成DOM => 绑定事件
监听事件：操作UI => 触发事件 => 响应处理 => 更新UI

数据驱动

数据：就是数据的意思（跟没说一样）
构建页面：设计数据结构 => 事件绑定逻辑 => 生成DOM
监听事件：操作UI => 触发事件 => 响应处理 => 更新数据 => 更新UI

区别

其实最大的转变是，以前会把组件视为DOM，把事件/逻辑处理视为Javascript，把样式视为CSS。而当转换思维方式之后，组件、事件、逻辑处理、样式都是一份数据，我们只需要把数据的状态和转换设计好，剩下的实现则由具现方式（模版引擎、事件机制等）来实现。
转换到数据驱动思维后，我们在编程实现的过程中，更多的是思考数据的维护和处理，而无需过于考虑UI的变化和事件的监听。

举例

<!--1. 事件驱动-->
<input type="text" id="input" />
<p id="p"></p>
<script>
$('#input').on('click', e => {
    const val = e.target.value;
    $('#p').text(val);
})
</script>
<!--2. 数据驱动 + vue-->
<input type="text" v-model="inputValue" />
<p>{{ inputValue }}</p>

<!--1). 事件驱动-->
<ul id="ul"></ul>
<script>
const dom = $('#ul');
list.forEach(item => {
    dom.append(`<li data-id="${item.id}"><span>${item.name}</span>: <a href="${item.href}">${item.href}</a></li>`)
});
</script>
<!--2). 数据驱动 + vue-->
<ul>
    <li v-for="item in list" :key="item.id"><span>{{item.name}}</span><a :href="item.href">{{item.href}}</a></li>
</ul>