国产精品免费视频,国产一区二区成人,毛片一级完整版免费

Vue與React 的崛起——前端演進之路

admin

2025年1月1日 13:25 本文熱度 1178

本文轉載于稀土掘金技術社區，作者：加減法原則

https://juejin.cn/post/7452929847511777331

前端開發從早期的靜態網頁，通過JavaScript引入動態交互，再到如今復雜的單頁應用（SPA），每一次變革都標志著技術的進步。Vue.js 與React的出現不僅革新了Web應用構建的方式，也帶來了全新的思考模式——數據驅動和組件化思維。那為什么Vue與React會成為前端開發的主流呢。

我們先來了解二者的特點

Vue

Vue 由前Google工程師尤雨溪（Evan You）在2014年發布，是三者中最年輕的框架。它綜合了Angular的數據綁定特性和React的虛擬DOM概念，同時保持了輕量級和簡單易用的特點。

設計理念：Vue 設計為漸進式框架，意味著它可以被逐步引入現有項目中，或者作為新項目的完整解決方案。它的核心庫專注于視圖層，易于與其他庫或已有項目整合。

靈活性與性能：Vue 提供了靈活的API和良好的性能表現，尤其是在中小型項目中表現出色。它的雙向數據綁定機制簡化了狀態管理和UI同步。

React

React 是由Facebook開發并維護的一個開源JavaScript庫，用于構建用戶界面。由于背后有強大的企業支持，React 在穩定性和長期支持方面具有優勢。
聲明式編程：React 推廣了一種聲明式的編程風格，使得代碼更易于閱讀和調試。通過使用JSX語法，React允許開發者直接在組件內部編寫類似HTML的模板代碼，增強了可讀性和表達力。
生態系統：React 生態系統非常豐富，擁有大量的第三方庫和工具，如Redux用于狀態管理，Next.js用于服務端渲染等。這些擴展讓React能夠適應各種復雜的業務需求。
性能優化：React 引入了虛擬DOM的概念，有效減少了實際DOM操作帶來的開銷，提高了應用的響應速度。同時，React也支持服務端渲染，進一步提升了首屏加載時間。

最原始的前端： DOM 編程

回首前端開發最初的模樣，那是一個底層 API DOM 編程與事件機制主導的時代，堪稱前端的原始社會。開發者們直接操作 DOM，通過諸如document.getElementById等底層方法獲取元素，再利用事件機制為元素綁定交互邏輯。就像下面這段代碼：

<!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>

在這段代碼中，我們手動獲取app和todo-input元素，然后給輸入框綁定input事件，當用戶輸入內容時，嘗試將輸入值賦給app元素的ineerText屬性（這里其實有誤，應為innerHTML，但這恰好反映出當時開發的易錯性）。這種開發方式極其復雜，頻繁地訪問和修改 DOM，性能很差。因為 JavaScript 的 V8 引擎是單線程的，而渲染引擎負責處理 HTML 和 CSS，二者相對獨立。每次 DOM 操作都像是一次漫長的 “跋涉”，從 V8 引擎到渲染引擎，路途遙遠，嚴重影響頁面渲染效率。

這種方式雖然直觀，但存在諸多缺點：

復雜性：隨著應用邏輯的增長，代碼變得難以管理和維護。
性能問題：頻繁地訪問和修改DOM導致瀏覽器渲染效率低下。
V8引擎與渲染引擎分離：JavaScript運行在V8引擎上，而HTML和CSS則由渲染引擎負責，兩者之間的交互增加了額外開銷。

為了解決這些問題，Vue引入了一種機制來批量收集DOM更新，從而減少不必要的重繪和回流，提高了頁面響應速度。

jQuery 帶來的改變

隨著前端需求日益復雜，jQuery 應運而生，。它作為一個強大的 JavaScript 框架，極大地簡化了 DOM 操作。通過封裝了一系列便捷方法，讓開發者告別了冗長繁瑣的原生 DOM 操作。例如，選取元素變得簡潔直觀，事件綁定也輕松許多，開發者得以從復雜的底層邏輯中解脫出來，將更多精力放在業務功能實現上。

<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等庫的出現極大地簡化了DOM操作，$符號成為了許多開發者不可或缺的一部分。它們提供了更簡潔的語法來選擇元素、遍歷節點樹以及處理事件，使得編寫跨瀏覽器兼容的代碼變得更加容易。然而，隨著Web進入2.0時代，應用程序變得越來越復雜，對性能的要求也越來越高，僅靠這些封裝庫已不足以滿足需求。

現代前端框架 Vue/React 崛起

到了現代前端框架階段，如Vue.js 和 React，開發者們開始更多地關注業務邏輯本身，而不是底層DOM操作。框架內部實現了高效的更新機制（例如虛擬DOM），減少了不必要的DOM操作，提升了用戶體驗。

Vue特別之處在于它的聲明式UI描述方式，讓開發者可以專注于數據模型的設計，而無需擔心視圖層的具體實現細節。

Vue的核心要素

數據綁定

Vue提供了一系列指令（如v-model）用于實現雙向數據綁定，使輸入框中的值能夠自動反映到數據模型中，反之亦然。

<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>

在這個例子中，v-model指令將輸入框的值與data()對象內的title屬性進行了雙向綁定。這意味著當用戶在輸入框中輸入內容時，title會實時更新；反之，如果title發生變化，輸入框的內容也會相應改變。

事件監聽

使用@keydown.enter這樣的事件修飾符可以讓特定鍵盤事件觸發相應的函數調用，提高開發效率。

動態樣式綁定

借助:class或v-bind:class，可以根據條件動態地添加或移除CSS類名，簡化樣式管理。

組件化

Vue鼓勵將界面劃分為獨立的組件，每個組件都有自己的模板、邏輯和樣式，這不僅提高了代碼復用率，還增強了項目的可維護性。

案例：一個簡單的待辦事項應用

通過一個簡單的待辦事項應用來具體展示Vue是如何工作的。這個例子包括創建新任務、顯示現有任務列表以及根據完成狀態設置不同的樣式。

<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: '睡覺', done: true}
      ]
    }
  },
methods: {
    addTodo() {
      this.todos.push({
        title: this.title,
        done: false
      });
      this.title = '';
    }
  }
};
Vue.createApp(App).mount('#app');
</script>