JavaScript数据绑定实现与双向绑定原理解析

JavaScript中的双向绑定并非语言原生特性，而是通过Proxy或Object.defineProperty劫持数据访问、结合DOM事件监听（如input）构建起“数据↔视图”的实时同步闭环；本文深入剖析其核心原理——数据劫持、视图更新与输入回写三者如何协同工作，并以手写Proxy示例直观展现最小可行链路，同时对比Vue 2/3、React、Svelte等主流框架在实现策略上的根本差异与演进逻辑，帮助开发者不仅知其然，更懂其所以然，在真实项目中理性权衡双向绑定的适用边界与替代方案。

JavaScript 中的数据绑定，尤其是双向绑定，核心在于让视图（UI）和数据模型（Model）自动同步：数据变，界面跟着更新；用户操作界面，数据也实时更新。它不是 JavaScript 本身的语法特性，而是通过语言能力（如属性拦截、事件监听、模板解析等）模拟出来的行为。

基础原理：监听数据变化 + 响应用户输入

双向绑定 = 数据劫持（响应式） + 视图更新 + 输入事件绑定。关键不在“双向”，而在于建立“数据 ↔ 元素值”之间的可追踪连接。

• 监听数据变化：用 Object.defineProperty（Vue 2）或 Proxy（Vue 3、Solid 等）拦截对数据的读取和赋值，一旦赋值就触发更新逻辑
• 绑定 DOM 元素：把数据映射到表单控件（、</code>、<code><select></code>）的 <code>value</code> 属性，并监听 <code>input</code>、<code>change</code> 等事件</li> <li><strong>更新闭环</strong>：用户输入 → 触发事件 → 修改数据 → 数据 setter 被捕获 → 通知视图重新渲染 → 视图中元素 value 同步刷新</li> </ul><h3>手写一个极简双向绑定示例（基于 Proxy）</h3> <p>以下是一个仅支持 <code><input v-model="msg"></code> 的最小实现，不含模板编译和依赖收集，但体现核心链路：</p> <font size="2"> <pre class="brush:php;toolbar:false;">// 1. 响应式数据 const data = { msg: 'hello' }; const reactiveData = new Proxy(data, { set(target, key, value) { target[key] = value; // 2. 数据变了，更新所有绑定该字段的 input document.querySelectorAll(`[v-model="${key}"]`).forEach(el => { el.value = value; }); return true; } }); // 3. 初始化：填充初始值 document.querySelectorAll('[v-model]').forEach(el => { const key = el.getAttribute('v-model'); el.value = reactiveData[key]; // 4. 绑定输入事件，反向更新数据 el.addEventListener('input', () => { reactiveData[key] = el.value; }); });</pre> </font> <p>这个例子没有虚拟 DOM 或依赖追踪，但它清晰展示了“谁改了谁、怎么通知、怎么回写”的主干逻辑。</p> <h3>主流框架中的差异与演进</h3> <p>不同框架用不同策略平衡性能、兼容性和开发体验：</p> <ul><li><strong>Vue 2</strong>：用 <code>Object.defineProperty</code> 递归遍历 data 对象，为每个属性添加 getter/setter；配合 <code>v-model</code> 指令在编译阶段生成更新函数</li> <li><strong>Vue 3</strong>：改用 <code>Proxy</code>，支持新增/删除属性、数组索引赋值、Map/Set 等，响应式更彻底</li> <li><strong>React</strong>：默认不提供双向绑定，主张“单向数据流 + 手动处理 onChange + setState”，但可通过封装自定义 Hook（如 <code>useInput</code>）模拟</li> <li><strong>Svelte</strong>：编译时将 <code>bind:value</code> 转为双向赋值语句，运行时无代理开销，零运行时响应式系统</li> </ul><h3>注意事项：不是所有场景都适合双向绑定</h3> <p>过度使用可能掩盖数据流向、增加调试难度，尤其在复杂表单或父子组件通信中：</p> <ul><li>表单项多、校验逻辑重时，建议用受控组件 + 显式状态管理（如 Formik、React Hook Form）</li> <li>跨层级共享状态，优先考虑 Context / Pinia / Zustand 等状态库，而非层层 v-model 透传</li> <li>异步数据加载后需回填表单，注意避免因响应式初始化顺序导致的覆盖或丢失</li> </ul><p>文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript数据绑定实现与双向绑定原理解析》文章吧，也可关注golang学习网公众号了解相关技术文章。</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/563471.html" title="OpenClaw如何查看已安装技能" class="img_box"> <img src="/uploads/20260410/177581164569d8bc3d5ce33.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="OpenClaw如何查看已安装技能">OpenClaw如何查看已安装技能 </a> <dl> <dt class="lineOverflow"><a href="/article/563471.html" title="OpenClaw如何查看已安装技能" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">OpenClaw如何查看已安装技能</dd> </dl> </div> <div class="cateItem"> <a href="/article/563473.html" title="Golang角色菜单权限实战教程" class="img_box"> <img src="/uploads/20260410/177581185969d8bd13b11d2.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Golang角色菜单权限实战教程"> </a> <dl> <dt class="lineOverflow"><a href="/article/563473.html" class="aBlack" title="Golang角色菜单权限实战教程">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Golang角色菜单权限实战教程</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/637626.html" class="img_box" title="Vite 依赖预构建为什么会因条件导出重复"> <img src="/uploads/20261102/1793604271-73872910bc-8b7a74610d-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Vite 依赖预构建为什么会因条件导出重复"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="package.json">package.json</a> <a href="javascript:;" class="aLightGray" title="optimizeDeps">optimizeDeps</a> <a href="javascript:;" class="aLightGray" title="依赖预构建">依赖预构建</a> <a href="javascript:;" class="aLightGray" title="条件导出">条件导出</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/637626.html" class="aBlack" target="_blank" title="Vite 依赖预构建为什么会因条件导出重复">Vite 依赖预构建为什么会因条件导出重复</a> </dt> <dd class="cont2"> <span><i class="view"></i>357浏览</span> <span class="collectBtn user_collection" data-id="637626" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637624.html" class="img_box" title="Vite ?worker 怎样把 Web Worker 作为模块导入"> <img src="/uploads/20261102/1793604169-308479d241-afca70736b-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Vite ?worker 怎样把 Web Worker 作为模块导入"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="TypeScript">TypeScript</a> <a href="javascript:;" class="aLightGray" title="vite">vite</a> <a href="javascript:;" class="aLightGray" title="Web Worker">Web Worker</a> <a href="javascript:;" class="aLightGray" title="?worker">?worker</a> <a href="javascript:;" class="aLightGray" title="前端多线程">前端多线程</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/637624.html" class="aBlack" target="_blank" title="Vite ?worker 怎样把 Web Worker 作为模块导入">Vite ?worker 怎样把 Web Worker 作为模块导入</a> </dt> <dd class="cont2"> <span><i class="view"></i>110浏览</span> <span class="collectBtn user_collection" data-id="637624" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637623.html" class="img_box" title="CSS zoom 怎样调整组件比例而不影响布局计算"> <img src="/uploads/20261102/1793603967-71c30f1e21-c2725d0384-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS zoom 怎样调整组件比例而不影响布局计算"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/637623.html" class="aBlack" target="_blank" title="CSS zoom 怎样调整组件比例而不影响布局计算">CSS zoom 怎样调整组件比例而不影响布局计算</a> </dt> <dd class="cont2"> <span><i class="view"></i>450浏览</span> <span class="collectBtn user_collection" data-id="637623" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637622.html" class="img_box" title="CSS sibling-index() 怎样按兄弟位置设置列表动画延迟"> <img src="/uploads/20261102/1793603950-446d4e439e-b9a8c20c80-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS sibling-index() 怎样按兄弟位置设置列表动画延迟"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="CSS动画">CSS动画</a> <a href="javascript:;" class="aLightGray" title="兄弟节点">兄弟节点</a> <a href="javascript:;" class="aLightGray" title="渐进增强">渐进增强</a> <a href="javascript:;" class="aLightGray" title="animation-delay">animation-delay</a> <a href="javascript:;" class="aLightGray" title="sibling-index()">sibling-index()</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/637622.html" class="aBlack" target="_blank" title="CSS sibling-index() 怎样按兄弟位置设置列表动画延迟">CSS sibling-index() 怎样按兄弟位置设置列表动画延迟</a> </dt> <dd class="cont2"> <span><i class="view"></i>434浏览</span> <span class="collectBtn user_collection" data-id="637622" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637621.html" class="img_box" title="CSS corner-shape 怎样绘制带缺口的卡片边角"> <img src="/uploads/20261102/1793603563-b1873b3f26-ec4a116d2f-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS corner-shape 怎样绘制带缺口的卡片边角"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/637621.html" class="aBlack" target="_blank" title="CSS corner-shape 怎样绘制带缺口的卡片边角">CSS corner-shape 怎样绘制带缺口的卡片边角</a> </dt> <dd class="cont2"> <span><i class="view"></i>331浏览</span> <span class="collectBtn user_collection" data-id="637621" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637620.html" class="img_box" title="CSS shape() 怎样用可伸缩路径裁剪卡片"> <img src="/uploads/20261102/1793603311-d707e01e1c-7d9d865701-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS shape() 怎样用可伸缩路径裁剪卡片"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/637620.html" class="aBlack" target="_blank" title="CSS shape() 怎样用可伸缩路径裁剪卡片">CSS shape() 怎样用可伸缩路径裁剪卡片</a> </dt> <dd class="cont2"> <span><i class="view"></i>151浏览</span> <span class="collectBtn user_collection" data-id="637620" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637619.html" class="img_box" title="CSS font-size-adjust 怎样让后备字体保持相近字高"> <img src="/uploads/20261102/1793602930-c29d68bf22-4b4fa07da1-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS font-size-adjust 怎样让后备字体保持相近字高"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/40476_new_0_1.html" class="aLightGray" title="兼容性">兼容性</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="font-size-adjust">font-size-adjust</a> <a href="javascript:;" class="aLightGray" title="CJK排版">CJK排版</a> <a href="javascript:;" class="aLightGray" title="字体回退">字体回退</a> <a href="javascript:;" class="aLightGray" title="x-height">x-height</a> <a href="javascript:;" class="aLightGray" title="cap-height">cap-height</a> <a href="javascript:;" class="aLightGray" title="from-font">from-font</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/637619.html" class="aBlack" target="_blank" title="CSS font-size-adjust 怎样让后备字体保持相近字高">CSS font-size-adjust 怎样让后备字体保持相近字高</a> </dt> <dd class="cont2"> <span><i class="view"></i>465浏览</span> <span class="collectBtn user_collection" data-id="637619" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637618.html" class="img_box" title="CSS reading-flow 怎样让网格卡片按视觉顺序获得焦点"> <img src="/uploads/20261102/1793602918-7be9113179-c26fc6c49c-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS reading-flow 怎样让网格卡片按视觉顺序获得焦点"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   <a href="/articletag/40050_new_0_1.html" class="aLightGray" title="可访问性">可访问性</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="无障碍">无障碍</a> <a href="javascript:;" class="aLightGray" title="键盘导航">键盘导航</a> <a href="javascript:;" class="aLightGray" title="CSS Grid">CSS Grid</a> <a href="javascript:;" class="aLightGray" title="reading-order">reading-order</a> <a href="javascript:;" class="aLightGray" title="reading-flow">reading-flow</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/637618.html" class="aBlack" target="_blank" title="CSS reading-flow 怎样让网格卡片按视觉顺序获得焦点">CSS reading-flow 怎样让网格卡片按视觉顺序获得焦点</a> </dt> <dd class="cont2"> <span><i class="view"></i>101浏览</span> <span class="collectBtn user_collection" data-id="637618" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637617.html" class="img_box" title="JavaScript Temporal 怎样处理跨时区日期计算"> <img src="/uploads/20261102/1793602594-e3ec93567c-1b6112556b-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript Temporal 怎样处理跨时区日期计算"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/637617.html" class="aBlack" target="_blank" title="JavaScript Temporal 怎样处理跨时区日期计算">JavaScript Temporal 怎样处理跨时区日期计算</a> </dt> <dd class="cont2"> <span><i class="view"></i>228浏览</span> <span class="collectBtn user_collection" data-id="637617" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637616.html" class="img_box" title="JavaScript Promise.withResolvers 怎样拆开 Promise 控制器"> <img src="/uploads/20261102/1793602487-c6ae650657-c4db2af146-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript Promise.withResolvers 怎样拆开 Promise 控制器"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/5173_new_0_1.html" class="aLightGray" title="异步编程">异步编程</a> · <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="Promise">Promise</a> <a href="javascript:;" class="aLightGray" title="Promise.withResolvers">Promise.withResolvers</a> <a href="javascript:;" class="aLightGray" title="resolve">resolve</a> <a href="javascript:;" class="aLightGray" title="reject">reject</a> <a href="javascript:;" class="aLightGray" title="异步事件">异步事件</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/637616.html" class="aBlack" target="_blank" title="JavaScript Promise.withResolvers 怎样拆开 Promise 控制器">JavaScript Promise.withResolvers 怎样拆开 Promise 控制器</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="637616" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637615.html" class="img_box" title="JavaScript FileSystemDirectoryHandle.values 怎样遍历目录条目"> <img src="/uploads/20261102/1793602393-689fb03f23-4d0c81d084-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript FileSystemDirectoryHandle.values 怎样遍历目录条目"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/637615.html" class="aBlack" target="_blank" title="JavaScript FileSystemDirectoryHandle.values 怎样遍历目录条目">JavaScript FileSystemDirectoryHandle.values 怎样遍历目录条目</a> </dt> <dd class="cont2"> <span><i class="view"></i>219浏览</span> <span class="collectBtn user_collection" data-id="637615" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/637614.html" class="img_box" title="JavaScript File System Access API 怎样从文件句柄创建可写流"> <img src="/uploads/20261102/1793602250-f6c1e4307f-df8e9763da-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript File System Access API 怎样从文件句柄创建可写流"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  22小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/637614.html" class="aBlack" target="_blank" title="JavaScript File System Access API 怎样从文件句柄创建可写流">JavaScript File System Access API 怎样从文件句柄创建可写流</a> </dt> <dd class="cont2"> <span><i class="view"></i>260浏览</span> <span class="collectBtn user_collection" data-id="637614" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight"> <!-- 右侧广告位banner --> <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13900.html" target="_blank" title="PubMedQA数据集详解：生物医学问答基准、功能与应用指南" class="img_box"> <img src="/uploads/20260908/6a9f83280940e7.65575695.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="PubMedQA数据集详解：生物医学问答基准、功能与应用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13900.html" class="aBlack" target="_blank" title="PubMedQA">PubMedQA</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。 </dd> <dd class="cont2">857次使用</dd> </dl> </li> <li> <a href="/ai/13899.html" target="_blank" title="H2O EvalGPT：开源LLM大模型评估与排行榜工具" class="img_box"> <img src="/uploads/20260908/17887986376a9ee6adaf3f5.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="H2O EvalGPT：开源LLM大模型评估与排行榜工具" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13899.html" class="aBlack" target="_blank" title="H2O EvalGPT">H2O EvalGPT</a></dt> <dd class="cont1 lineTwoOverflow"> H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。 </dd> <dd class="cont2">862次使用</dd> </dl> </li> <li> <a href="/ai/13898.html" target="_blank" title="LMArena是什么？伯克利AI模型评估平台使用指南与功能解析" class="img_box"> <img src="/uploads/20260908/6a9f862dbcfec7.27385604.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="LMArena是什么？伯克利AI模型评估平台使用指南与功能解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13898.html" class="aBlack" target="_blank" title="LMArena">LMArena</a></dt> <dd class="cont1 lineTwoOverflow"> LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。 </dd> <dd class="cont2">938次使用</dd> </dl> </li> <li> <a href="/ai/13897.html" target="_blank" title="斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解" class="img_box"> <img src="/uploads/20260908/6a9f86b31ed789.06773114.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13897.html" class="aBlack" target="_blank" title="HELM">HELM</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。 </dd> <dd class="cont2">919次使用</dd> </dl> </li> <li> <a href="/ai/13896.html" target="_blank" title="MMBench详解：多模态大模型基准测试、功能特点与使用指南" class="img_box"> <img src="/uploads/20260908/6a9f86d3eed3e7.18564236.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MMBench详解：多模态大模型基准测试、功能特点与使用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13896.html" class="aBlack" target="_blank" title="MMBench">MMBench</a></dt> <dd class="cont1 lineTwoOverflow"> MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。 </dd> <dd class="cont2">747次使用</dd> </dl> </li> </ul> </div> <!-- 相关文章 --> <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <script src="/assets/js/frontend/common.js"></script> </body> </html>