Vue.js 与 Native HTML5 的不同点
现在有很多方法和框架可以建立网页前端系统，例如 React、AngularJS、Vue.js 等等。 使用原生的 HTML5 与 JavaScript 绝对可以建立一个系统，但通常使用一个好的框架可以在结构与安全性上以较好的设计模式来实现系统。
一个工具或架构被创造出来通常是因为开发人员在遇到了某些困难。 举例来说，jQuery 的发明目的是为了在支持不同标准的浏览器上使用 JavaScript ，而且它是第一个能够使用 CSS 选择器来控制 DOM （Document Object Modal） 的库。 而 HTML5 querySelector 则复制了这个很酷的功能让 HTML 可以更简单地做 DOM。
为何需要 VueJS
存取 DOM
使用 Pure HTML5 JavaScript 访问 DOM 以从 HTML 树抓取数据时，有许多工作需要完成，例如针对元素、新增监听器以侦测使用者在 UI 上的互动，或在目标动作被捕获时回传资料，其实很吃资源。
<html>
<body>
<h1>Checkbox with pure HTML5 syntax</h1>
<label>
<input type="checkbox" name="group1" value="check1" /> checkbox 1 </label>
<label> <input type="checkbox" name="group1" value="check2" /> checkbox 2 </label>
</body>
</html>
<script>
window.onload = ()=>{
const group1: NodeListOf<HTMLInputElement> | undefined = document.querySelectorAll("input[name=group1]");
if (!group1) return;
group1.forEach((checkbox) => { checkbox.addEventListener("change", (e: Event) => {
if (!e.target) return;
const targetValue = (e.target as HTMLInputElement).value.toString();
const checked = (e.target as HTMLInputElement).checked;
if (!checked) {
this.selected = this.selected.filter(
(select) => select !== targetValue
);
} else
{
this.selected = [...this.selected, targetValue];
}
});
});
});
MVVM 模型
相较于原生 HTML5 JavaScript （或 jQuery） 直接作 DOM，Vue.js 有自己的 MVVM 模型可以在取得新资料模型的同时修改 DOM。 换句话说，我们可以专注于数据结构而不是设计我们自己的模型来直接作 DOM。
这两种方式都适用于不同的情境，但 Vue.js 实际上提供了更简单的路径来建立网页前端。
使用情况 Vue.js
<div>
<label>
check 1
<input type="checkbox" v-model="checkboxList" value="1" /> </label>
<label> check 2
<input type="checkbox" v-model="checkboxList" value="2" /> </label>
</div>
export default Vue.extend({
data: () => ({ checkboxList: [],
}),
});
Vue.js 的优势 —— 不只是操作 DOM，更是设计架构
Vue.js 的出现，不只是为了让我们“少写一些 DOM 操作”，更是为了提升整体系统的设计质量与开发效率。透过 Vue 的 组件化设计、响应式数据系统 与 生命周期管理机制，我们可以更系统化地思考网页前端的架构。
1. 组件化：以模块思维构建页面
原生 HTML5 + JS 的开发过程通常是将所有逻辑与 UI 混合在一起，随着功能增加，代码容易膨胀、难以维护。而 Vue 推崇单文件组件（SFC：Single File Component） ，每个组件管理自己的一套 HTML、CSS 和 JS，使得：
- 页面结构更清晰
- 重用性更强
- 有利于多人协作开发
<!-- CheckboxGroup.vue -->
<template>
<label v-for="item in options" :key="item">
<input type="checkbox" :value="item" v-model="modelValue" />
{{ item }}
</label>
</template>
<script setup>
defineProps({
options: Array,
modelValue: Array,
})
defineEmits(['update:modelValue'])
</script>
2. 响应式系统：数据变化即 UI 更新
Vue 使用 Proxy 实现响应式追踪。当数据发生变化时，相关的视图会自动更新，无需开发者显式调用 DOM 操作：
const state = reactive({ count: 0 })
function increment() {
state.count++
}
// 视图会自动更新，无需 document.getElementById(...).innerText = ...
VueJS MVVM 模型与 Pure HTML5 的比较
| 对比维度 | 原生 HTML5 + JS | Vue.js |
|---|---|---|
| DOM 操作 | 手动查找 & 变更 | 自动响应式绑定 |
| 事件处理 | 每个元素单独监听 | 模板中定义逻辑，结构清晰 |
| 状态同步 | 自己管理数据与 UI 映射 | 数据变了 UI 自动变 |
| 项目架构 | 没有统一结构，易耦合 | 组件化 + 生命周期，职责清晰 |
| 模块复用 | 函数或对象封装（较难） | 组件复用（props、emit、slot） |
