<>概述

随着大前端时代的到来,我们从 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>

技术
©2019-2020 Toolsou All rights reserved,
2021年2月程序员工资统计,平均15144元初识MySQL之综合复习篇(干货)Faster RCNN系列算法原理讲解(笔记)谷歌称居家办公影响工作效率!2021 年将回归线下办公C语言控制台小游戏,打砖块GDOI2019 游记CSS架构设计Python基础知识整理笔记2019年终总结——工作第二年用C++跟你聊聊“原型模式” (复制/拷贝构造函数)