Vue、React、Angular

Vue、React、Angular 常被一起稱作三大框架、現(xiàn)代框架。

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

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

1. 前端框架改變了什么

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

其中最容易讓代碼變得復(fù)雜的業(yè)務(wù)邏輯就是 DOM 操作。

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

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

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

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

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

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

再就是花了太多時間在 DOM 操作上，為了取某個父級會經(jīng)歷多次 .parentNode，導(dǎo)致經(jīng)常要去數(shù)數(shù)等這些問題。

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

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

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

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

以數(shù)據(jù)來驅(qū)動視圖，特別是在列表渲染上，這個特性的優(yōu)點就能被放的很大，其具體實現(xiàn)原理可以學(xué)習(xí)對應(yīng)框架的底層細節(jié)。

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

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

2. 小結(jié)

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

慕課網(wǎng)有 Vue 相關(guān)的 Wiki，相信閱讀完會有更多的收獲。