前端開(kāi)發(fā)從早期的靜態(tài)網(wǎng)頁(yè)，通過(guò)JavaScript引入動(dòng)態(tài)交互，再到如今復(fù)雜的單頁(yè)應(yīng)用（SPA），每一次變革都標(biāo)志著技術(shù)的進(jìn)步。Vue.js 與React的出現(xiàn)不僅革新了Web應(yīng)用構(gòu)建的方式，也帶來(lái)了全新的思考模式——數(shù)據(jù)驅(qū)動(dòng)和組件化思維。那為什么Vue與React會(huì)成為前端開(kāi)發(fā)的主流呢。
我們先來(lái)了解二者的特點(diǎn)
Vue
- Vue 由前Google工程師尤雨溪（Evan You）在2014年發(fā)布，是三者中最年輕的框架。它綜合了Angular的數(shù)據(jù)綁定特性和React的虛擬DOM概念，同時(shí)保持了輕量級(jí)和簡(jiǎn)單易用的特點(diǎn)。
設(shè)計(jì)理念：Vue 設(shè)計(jì)為漸進(jìn)式框架，意味著它可以被逐步引入現(xiàn)有項(xiàng)目中，或者作為新項(xiàng)目的完整解決方案。它的核心庫(kù)專(zhuān)注于視圖層，易于與其他庫(kù)或已有項(xiàng)目整合。
靈活性與性能：Vue 提供了靈活的API和良好的性能表現(xiàn)，尤其是在中小型項(xiàng)目中表現(xiàn)出色。它的雙向數(shù)據(jù)綁定機(jī)制簡(jiǎn)化了狀態(tài)管理和UI同步。
React
- React 是由Facebook開(kāi)發(fā)并維護(hù)的一個(gè)開(kāi)源JavaScript庫(kù)，用于構(gòu)建用戶(hù)界面。由于背后有強(qiáng)大的企業(yè)支持，React 在穩(wěn)定性和長(zhǎng)期支持方面具有優(yōu)勢(shì)。
- 聲明式編程：React 推廣了一種聲明式的編程風(fēng)格，使得代碼更易于閱讀和調(diào)試。通過(guò)使用JSX語(yǔ)法，React允許開(kāi)發(fā)者直接在組件內(nèi)部編寫(xiě)類(lèi)似HTML的模板代碼，增強(qiáng)了可讀性和表達(dá)力。
- 生態(tài)系統(tǒng)：React 生態(tài)系統(tǒng)非常豐富，擁有大量的第三方庫(kù)和工具，如Redux用于狀態(tài)管理，Next.js用于服務(wù)端渲染等。這些擴(kuò)展讓React能夠適應(yīng)各種復(fù)雜的業(yè)務(wù)需求。
- 性能優(yōu)化：React 引入了虛擬DOM的概念，有效減少了實(shí)際DOM操作帶來(lái)的開(kāi)銷(xiāo)，提高了應(yīng)用的響應(yīng)速度。同時(shí)，React也支持服務(wù)端渲染，進(jìn)一步提升了首屏加載時(shí)間。
最原始的前端： DOM 編程
回首前端開(kāi)發(fā)最初的模樣，那是一個(gè)底層 API DOM 編程與事件機(jī)制主導(dǎo)的時(shí)代，堪稱(chēng)前端的原始社會(huì)。開(kāi)發(fā)者們直接操作 DOM，通過(guò)諸如document.getElementById等底層方法獲取元素，再利用事件機(jī)制為元素綁定交互邏輯。就像下面這段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="app"></h2>
<input type="text" id="todo-input">
<script>
var app = document.getElementById('app')
var todoInput = document.getElementById('todo-input')
todoInput.addEventListener('input', function(event) {
var val = event.target.value
console.log(val, todoInput.value, this.value);
app.ineerText = val
})
</script>
</body>
</html>
在這段代碼中，我們手動(dòng)獲取app和todo-input元素，然后給輸入框綁定input事件，當(dāng)用戶(hù)輸入內(nèi)容時(shí)，嘗試將輸入值賦給app元素的ineerText屬性（這里其實(shí)有誤，應(yīng)為innerHTML，但這恰好反映出當(dāng)時(shí)開(kāi)發(fā)的易錯(cuò)性）。這種開(kāi)發(fā)方式極其復(fù)雜，頻繁地訪(fǎng)問(wèn)和修改 DOM，性能很差。因?yàn)?JavaScript 的 V8 引擎是單線(xiàn)程的，而渲染引擎負(fù)責(zé)處理 HTML 和 CSS，二者相對(duì)獨(dú)立。每次 DOM 操作都像是一次漫長(zhǎng)的 “跋涉”，從 V8 引擎到渲染引擎，路途遙遠(yuǎn)，嚴(yán)重影響頁(yè)面渲染效率。
這種方式雖然直觀，但存在諸多缺點(diǎn)：
- 復(fù)雜性：隨著應(yīng)用邏輯的增長(zhǎng)，代碼變得難以管理和維護(hù)。
- 性能問(wèn)題：頻繁地訪(fǎng)問(wèn)和修改DOM導(dǎo)致瀏覽器渲染效率低下。
- V8引擎與渲染引擎分離：JavaScript運(yùn)行在V8引擎上，而HTML和CSS則由渲染引擎負(fù)責(zé)，兩者之間的交互增加了額外開(kāi)銷(xiāo)。
為了解決這些問(wèn)題，Vue引入了一種機(jī)制來(lái)批量收集DOM更新，從而減少不必要的重繪和回流，提高了頁(yè)面響應(yīng)速度。
jQuery 帶來(lái)的改變
隨著前端需求日益復(fù)雜，jQuery 應(yīng)運(yùn)而生，。它作為一個(gè)強(qiáng)大的 JavaScript 框架，極大地簡(jiǎn)化了 DOM 操作。通過(guò)封裝了一系列便捷方法，讓開(kāi)發(fā)者告別了冗長(zhǎng)繁瑣的原生 DOM 操作。例如，選取元素變得簡(jiǎn)潔直觀，事件綁定也輕松許多，開(kāi)發(fā)者得以從復(fù)雜的底層邏輯中解脫出來(lái)，將更多精力放在業(yè)務(wù)功能實(shí)現(xiàn)上。
<input type="text" id="todo-input">
<script>
var todoInput = document.getElementById('todo-input');
todoInput.addEventListener('input', function(event) {
console.log(event.target.value);
});
</script>
Query等庫(kù)的出現(xiàn)極大地簡(jiǎn)化了DOM操作，$符號(hào)成為了許多開(kāi)發(fā)者不可或缺的一部分。它們提供了更簡(jiǎn)潔的語(yǔ)法來(lái)選擇元素、遍歷節(jié)點(diǎn)樹(shù)以及處理事件，使得編寫(xiě)跨瀏覽器兼容的代碼變得更加容易。然而，隨著Web進(jìn)入2.0時(shí)代，應(yīng)用程序變得越來(lái)越復(fù)雜，對(duì)性能的要求也越來(lái)越高，僅靠這些封裝庫(kù)已不足以滿(mǎn)足需求。
現(xiàn)代前端框架 Vue/React 崛起
到了現(xiàn)代前端框架階段，如Vue.js 和 React，開(kāi)發(fā)者們開(kāi)始更多地關(guān)注業(yè)務(wù)邏輯本身，而不是底層DOM操作。框架內(nèi)部實(shí)現(xiàn)了高效的更新機(jī)制（例如虛擬DOM），減少了不必要的DOM操作，提升了用戶(hù)體驗(yàn)。
Vue特別之處在于它的聲明式UI描述方式，讓開(kāi)發(fā)者可以專(zhuān)注于數(shù)據(jù)模型的設(shè)計(jì)，而無(wú)需擔(dān)心視圖層的具體實(shí)現(xiàn)細(xì)節(jié)。
Vue的核心要素
- Vue提供了一系列指令（如
v-model）用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定，使輸入框中的值能夠自動(dòng)反映到數(shù)據(jù)模型中，反之亦然。
<div id="app">
<h2>{{title}}</h2>
<input type="text" v-model="title">
</div>
<script>
const App = {
data() {
return { title: "" }
}
};
Vue.createApp(App).mount('#app');
</script>
在這個(gè)例子中，v-model指令將輸入框的值與data()對(duì)象內(nèi)的title屬性進(jìn)行了雙向綁定。這意味著當(dāng)用戶(hù)在輸入框中輸入內(nèi)容時(shí)，title會(huì)實(shí)時(shí)更新；反之，如果title發(fā)生變化，輸入框的內(nèi)容也會(huì)相應(yīng)改變。
- 使用
@keydown.enter這樣的事件修飾符可以讓特定鍵盤(pán)事件觸發(fā)相應(yīng)的函數(shù)調(diào)用，提高開(kāi)發(fā)效率。
- 借助
:class或v-bind:class，可以根據(jù)條件動(dòng)態(tài)地添加或移除CSS類(lèi)名，簡(jiǎn)化樣式管理。
- Vue鼓勵(lì)將界面劃分為獨(dú)立的組件，每個(gè)組件都有自己的模板、邏輯和樣式，這不僅提高了代碼復(fù)用率，還增強(qiáng)了項(xiàng)目的可維護(hù)性。
案例：一個(gè)簡(jiǎn)單的待辦事項(xiàng)應(yīng)用
通過(guò)一個(gè)簡(jiǎn)單的待辦事項(xiàng)應(yīng)用來(lái)具體展示Vue是如何工作的。這個(gè)例子包括創(chuàng)建新任務(wù)、顯示現(xiàn)有任務(wù)列表以及根據(jù)完成狀態(tài)設(shè)置不同的樣式。
<div id="app">
<h2>{{title}}</h2>
<input type="text" v-model="title" @keydown.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span :class="{done: todo.done}">{{todo.title}}</span>
</li>
</ul>
</div>
<script>
const App = {
data() {
return {
title: "",
todos: [
{title: '吃飯', done: false },
{title: '睡覺(jué)', done: true}
]
}
},
methods: {
addTodo() {
this.todos.push({
title: this.title,
done: false
});
this.title = '';
}
}
};
Vue.createApp(App).mount('#app');
</script>
事件監(jiān)聽(tīng) (@keydown.enter)
@keydown.enter="addTodo"表示當(dāng)用戶(hù)按下回車(chē)鍵時(shí)，會(huì)觸發(fā)addTodo方法，該方法負(fù)責(zé)將新的待辦事項(xiàng)添加到todos數(shù)組中，并清除輸入框。
動(dòng)態(tài)樣式綁定 (:class)
:class="{done: todo.done}"根據(jù)todo.done的布爾值決定是否應(yīng)用.done類(lèi)名，從而實(shí)現(xiàn)已完成任務(wù)的視覺(jué)區(qū)分。
總結(jié)
總之，Vue.js 不僅改變了我們構(gòu)建Web應(yīng)用的方式，更重要的是它引導(dǎo)了一種新的思考路徑：讓開(kāi)發(fā)者可以更高效地解決問(wèn)題，同時(shí)享受簡(jiǎn)潔優(yōu)雅的編碼過(guò)程。隨著技術(shù)的不斷發(fā)展，未來(lái)可能會(huì)有更多的創(chuàng)新涌現(xiàn)，但無(wú)論如何，Vue所倡導(dǎo)的數(shù)據(jù)驅(qū)動(dòng)思想和組件化的實(shí)踐將會(huì)持續(xù)影響著前端領(lǐng)域的發(fā)展方向。
希望這篇文章能幫助你更好地理解Vue.js的核心理念及其在實(shí)際項(xiàng)目中的應(yīng)用。
400 186 1886
