Vue、React、Angular

Vue、React、Angular 常被一起稱作三大框架、現代框架。

三大框架是目前驅動前端項目底層的最常用的框架。隨著前端行業從業人員的增加，更易上手的 Vue 和 React 占據了更大部分市場。

本章節不會探討這些框架的具體用法

1. 前端框架改變了什么

隨著 AJAX 的普及以及瀏覽器性能的提升，前端的交互越來越復雜，前端工程師的工作職責也在變廣。

其中最容易讓代碼變得復雜的業務邏輯就是 DOM 操作。

在沒有任何框架的情況下，給一個按鈕切換文案可能是這樣的：

var btn = document.querySelector('.btn');

btn.addEventListener('click', function() {
  var txt = btn.innerText;

  if (txt === '開') {
    btn.innerText = '關';
  } else {
    btn. innerText = '開';
  }
});

如果要往里面插入各種邏輯，如發起請求，請求后對應界面上的某個 DOM 的復雜改變，代碼就會變得越來越難維護。

如果有維護過老項目，對這方面的印象會更深刻。老項目可能會充斥著各種字符串拼接 HTML，代碼可讀性差，邏輯難以被后人擴充維護，小模塊的重構又怕影響到項目根基，這些問題會隨著時間慢慢暴露出來。

再就是花了太多時間在 DOM 操作上，為了取某個父級會經歷多次 .parentNode，導致經常要去數數等這些問題。

不管是性能還是可維護性，總歸來講就是在 DOM 操作上吃了太多虧，這一點也是出現這些前端框架的出要原因：UI 與 數據的同步太費事兒。

對于新人，剛學習前端框架感到最震撼的點通常都是框架對 DOM 操作的解放，以 Vue2.x 為例：

<template>
	<button @click="toggle">
    {{ text }}
  </button>
</template>

<script>
	export default {
    data() {
      return {
        text: '開',
      }
    },
    method: {
      toggle() {
        this.text = (this.text === '開') ? '關' : '開';
      },
    },
  };
</script>

以數據來驅動視圖，特別是在列表渲染上，這個特性的優點就能被放的很大，其具體實現原理可以學習對應框架的底層細節。

所以前端框架帶來的最大改變，就是解放了大量的操作 DOM 的工作，讓開發者更注重邏輯上的表現。

其他的改變，還有組件化、工程化等，具體開發就能體會到。

2. 小結

前端框架是目前必備技能，可以選其一針對學習研究，再擴展其他。

慕課網有 Vue 相關的 Wiki，相信閱讀完會有更多的收獲。