Vue 和 React 等现代前端框架之所以能取代 jQuery，主要是因为它们在开发模式、效能和 程式码维护性等方面，提供了更先进的解决方案。以下是一些关键原因和范例： **1. 声明式渲染 vs. 命令式操作：** * **jQuery：** * jQuery 主要以「命令式」的方式操作 DOM。开发者需要明确地指示程式码如何改变 网页上的元素。 * 范例：使用 `$('#myElement').text('New Text')` 来手动更新元素内容。 * **Vue/React：** * Vue 和 React 采用「声明式」的开发模式。开发者只需描述期望的网页状态，框架 会自动处理 DOM 更新。 * 范例（Vue）：在模板中绑定资料 `{{ message }}`，当 `message` 变更时，网页会 自动更新。 * 这种方式让程式码更简洁、易於理解和维护。 **2. 组件化开发：** * **jQuery：** * jQuery 主要关注 DOM 操作，缺乏内建的组件化机制。 * 在大型应用中，程式码容易变得混乱且难以维护。 * **Vue/React：** * Vue 和 React 强调组件化开发，将网页拆分为独立、可重复使用的组件。 * 这使得程式码更具模组化、可测试性更高，并提升开发效率。 * 例如，你可以建立一个按钮组件，在不同的页面重复利用。 **3. 虚拟 DOM：** * **jQuery：** * jQuery 直接操作真实 DOM，频繁的 DOM 操作可能导致效能问题。 * **Vue/React：** * Vue 和 React 使用虚拟 DOM，在记忆体中模拟 DOM 结构。 * 当资料变更时，框架会先在虚拟 DOM 中进行差异比对，然後只更新实际需要变更的 DOM 部分，提升效能。 **4. 资料绑定：** * **jQuery：** * 需要手动的去更新资料以及需要手动的去更新页面。 * **Vue/React：** * vue以及react都提供双向资料绑定。 * 也就是资料的变更，会直接体现在页面上，页面的变更，也会影响到资料的变化。 Q. 我不太明白上述的渲染与声明、组件等的说明。能分别举生活可能的情景或是小故事来解释 吗？ 好的，让我们用生活情境或小故事来解释这些概念： **1. 声明式渲染 vs. 命令式操作：** * **命令式操作（jQuery 类似）：** * 想像你是一位餐厅服务生，客人点了一份「番茄义大利面」。 * 使用命令式操作，你需要一步一步地指示厨师： * 「拿一个盘子。」 * 「煮义大利面。」 * 「准备番茄酱。」 * 「将义大利面放入盘子。」 * 「淋上番茄酱。」 * 「撒上起司。」 * 「端给客人。」 * 每一步都必须明确指示，如果客人改变主意，例如不要起司，你必须重新指示厨师修 改每一个步骤。 * **声明式渲染（Vue/React 类似）：** * 同样是餐厅服务生，但这次你使用的是声明式。 * 你只需要告诉厨师：「客人要一份番茄义大利面。」 * 厨师知道如何制作番茄义大利面，并自动完成所有步骤。 * 如果客人不要起司，你只需要告诉厨师：「客人要一份番茄义大利面，不要起司。」 厨师会自动调整，你不需要一步一步指示。 * 声明式就是我只要说出我要的结果，至於中间的过程框架会自动处理。 **2. 组件化开发：** * **组件化开发（Vue/React）：** * 想像你是一位乐高积木玩家。 * 你有很多不同种类的乐高积木，例如轮子、砖块、窗户等。 * 你可以将这些积木组合成不同的组件，例如汽车、房子、飞机等。 * 你可以重复使用这些组件，例如在不同的房子中使用相同的窗户。 * 网页开发中，组件就是网页中可重复使用的小单元，例如按钮、导航栏、表单等。 * 组件化让你更容易管理和重复使用程式码，就像乐高积木一样。 **3. 虚拟 DOM：** * **虚拟 DOM（Vue/React）：** * 想像你是一位画家，你要在一幅画上修改一些细节。 * 直接在画布上修改，可能会弄脏或损坏画作。 * 虚拟 DOM 就像是你在画布上覆盖一张透明的胶片，在胶片上进行修改。 * 修改完成後，你将胶片上的修改应用到原始画布上，只修改需要变更的部分。 * 虚拟 DOM 让网页更新更有效率，减少对实际网页内容的直接修改，从而提高效能。 希望这些生活化的例子能帮助你更好地理解这些概念。 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 223.138.162.107 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/heart/M.1743192626.A.972.html