vue介紹以及相關概念理解大全

時間 2019-11-24

標籤 vue 介紹以及相關概念理解大全简体版

原文原文鏈接

1.什麼是vue

以官網的解釋來講，vue是漸進式javascript框架。Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。javascript

2.特色

核心只關注視圖（view）css

易學，輕量，靈活html

適用於移動端項目前端

漸進式框架 vue

3.漸進式框架的理解

在我看來，漸進式表明的含義是：主張最少。
每一個框架都不可避免會有本身的一些特色，從而會對使用者有必定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
好比說，Angular，它兩個版本都是強主張的，若是你用它，必須接受如下東西：
- 必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每一個視圖框架都有，難以免）java

因此Angular是帶有比較強的排它性的，若是你的應用不是從頭開始，而是要不斷考慮是否跟其餘東西集成，這些主張會帶來一些困擾。react

好比React，它也有必定程度的主張，它的主張主要是函數式編程的理念，好比說，你須要知道什麼是反作用，什麼是純函數，如何隔離反作用。它的侵入性看似沒有Angular那麼強，主要由於它是軟性侵入。git

Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你能夠在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也能夠整個用它全家桶開發，當Angular用；還能夠用它的視圖，搭配你本身設計的整個下層用。你能夠在底層數據邏輯的地方用OO和設計模式的那套理念，也能夠函數式，均可以，它只是個輕量視圖而已，只作了本身該作的事，沒有作不應作的事，僅此而已。
漸進式的含義，個人理解是：沒有多作職責以外的事。github

4.兩個核心點

1.響應的數據變化
        當數據發生變化----視圖自動更新
2.組合的視圖組件
        UI頁面映射爲組件樹
        劃分組件可維護、可複用、可測試

5.MVVM

MVVM分爲三個部分：分別是M（Model，模型層），V（View，視圖層），VM（ViewModel，V與M鏈接的橋樑，也能夠看做爲控制器）
一、 M：模型層，主要負責業務數據相關；
二、 V：視圖層，顧名思義，負責視圖相關，細分下來就是html+css層；
三、 VM：V與M溝通的橋樑，負責監聽M或者V的修改，是實現MVVM雙向綁定的要點；vuex

MVVM支持雙向綁定，意思就是當M層數據進行修改時，VM層會監測到變化，而且通知V層進行相應的修改，反之修改V層則會通知M層數據進行修改，以此也實現了視圖與模型層的相互解耦；

6.數據的雙向綁定與單項綁定

雙向數據綁定和單向數據綁定解釋：

a. 單向數據綁定
　　指的是咱們先把模板寫好，而後把模板和數據（數據可能來自後臺）整合到一塊兒造成HTML代碼，而後把這段HTML代碼插入到文檔流裏面。
單向數據綁定缺點：HTML代碼一旦生成完之後，就沒有辦法再變了，若是有新的數據來了，那就必須把以前的HTML代碼去掉，再從新把新的數據和模板一塊兒整合後插入到文檔流中。簡單的來講就是DOM操做直接改變

b. 數據數據雙向
　　數據模型（Module）和視圖（View）之間的雙向綁定。
用戶在視圖上的修改會自動同步到數據模型中去，一樣的，若是數據模型中的值發生了變化，也會馬上同步到視圖中去。雙向數據綁定的優勢是無需進行和單向數據綁定的那CRUD（Create，Retrieve，Update，Delete）操做雙向數據綁定最常常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操做，咱們就已經拿到了用戶的數據存放到數據模型中了。

在react中是單向數據綁定，而在vue和augular中的特點是雙向數據綁定。爲何會選擇兩種不一樣的機制呢？我猜想是兩種不一樣的機制有不一樣的適應場景，查了一些資料後，總結一下。

1、各自優點

雙向數據綁定給人的最大的優越感就是方便。當數據data發生變化時，頁面自動發生更新。可是有一個缺點也是由於自動更新而致使的，由於這樣你就不知道data何時變了，也不知道是誰變了，變化後也不會通知你，固然你能夠watch來監聽data的變化，可是這變複雜了，還不如單向數據綁定。

Vuex推薦單向綁定就是爲了[控制慾]！，雖然單向綁定犧牲了一部分便捷性，換來的是更大的[控制力]

除此以外單向數據綁定對於複雜應用來講是實施統一的狀態管理，方便跟蹤。

2、單向數據與雙向數據關係

單向數據綁定的實現思路：

全部數據只有一份
一旦數據變化，就去更新頁面(data-頁面)，可是沒有(頁面-data)
若是用戶在頁面上作了變更，那麼就手動收集起來(雙向是自動)，合併到原有的數據中。

其實單向綁定也有雙向綁定的意味，不過頁面變更後數據的變化不會自動更新。方神解析了這個魔法：雙向綁定 = 單向綁定 + UI事件監聽。請看下面的代碼示例

vue數據雙向綁定

<body>
  <div id="app">
    <input type="text" v-model="meg">
    <p>{{data}}</p>
  </div>
 
  <script>
    var app = new Vue({
      el:'#app',
      data :{
        meg:''
      }
     
    })
  </script>
</body>

當你在頁面的input框中輸入值時，下面一行同步顯示內容，若是咱們不要v-model指令能實現這個效果嗎? 只須要改成:

 //首先設置value屬性爲meg，而後監聽輸入事件
<input type="text" :value="meg" @input="meg=$event.target.value">

一樣也實現了雙向數據綁定，因此它並非什麼黑魔法！

7.VUE對比其餘框架

引用至vue官網若是沒耐心看請直接下拉到個人總結.

React 和 Vue 有許多類似之處，它們都有：

使用 Virtual DOM
提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。
將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。

因爲有着衆多的類似處，咱們會用更多的時間在這一塊進行比較。這裏咱們不僅保證技術內容的準確性，同時也兼顧了平衡的考量。咱們須要認可 React 比 Vue 更好的地方，好比更豐富的生態系統。

運行時性能

React 和 Vue 都是很是快的，因此速度並非在它們之中作選擇的決定性因素。

優化

在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹。

如要避免沒必要要的子組件的重渲染，你須要在全部可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時你可能會須要使用不可變的數據結構來使得你的組件更容易被優化。

然而，使用 PureComponent 和 shouldComponentUpdate 時，須要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。若是不符合這個狀況，那麼此類優化就會致使難以察覺的渲染結果不一致。這使得 React 中的組件優化伴隨着至關的心智負擔。

在 Vue 應用中，組件的依賴是在渲染過程當中自動追蹤的，因此係統能精確知曉哪一個組件確實須要被重渲染。你能夠理解爲每個組件都已經自動得到了 shouldComponentUpdate，而且沒有上述的子樹問題限制。

Vue 的這個特色使得開發者再也不須要考慮此類優化，從而可以更好地專一於應用自己。

HTML & CSS

在 React 中，一切都是 JavaScript。不只僅是 HTML 能夠用 JSX 來表達，如今的潮流也愈來愈多地將 CSS 也歸入到 JavaScript 中來處理。這類方案有其優勢，但也存在一些不是每一個開發者都能接受的取捨。

Vue 的總體思想是擁抱經典的 Web 技術，並在其上進行擴展。咱們下面會詳細分析一下。

JSX vs Templates

在 React 中，全部的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。

使用 JSX 的渲染函數有下面這些優點：

你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。好比你可使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 做用域中的值等等。
開發工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的 (好比，linting、類型檢查、編輯器的自動完成)。

事實上 Vue 也提供了渲染函數，甚至支持 JSX。然而，咱們默認推薦的仍是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優點：

對於不少習慣了 HTML 的開發者來講，模板比起 JSX 讀寫起來更天然。這裏固然有主觀偏好的成分，但若是這種區別會致使開發效率的提高，那麼它就有客觀的價值存在。
基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更爲容易。
這也使得設計師和新人開發者更容易理解和參與到項目中。
你甚至可使用其餘模板預處理器，好比 Pug 來書寫 Vue 的模板。

有些開發者認爲模板意味着須要學習額外的 DSL (Domain-Specific Language 領域特定語言) 才能進行開發——咱們認爲這種區別是比較膚淺的。首先，JSX 並非沒有學習成本的——它是基於 JS 之上的一套額外語法。同時，正如同熟悉 JS 的人學習 JSX 會很容易同樣，熟悉 HTML 的人學習 Vue 的模板語法也是很容易的。最後，DSL 的存在使得咱們可讓開發者用更少的代碼作更多的事，好比 v-on 的各類修飾符，在 JSX 中實現對應的功能會須要多得多的代碼。

更抽象一點來看，咱們能夠把組件區分爲兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。咱們推薦在前者中使用模板，在後者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不一樣有所變化，但總體來講咱們發現表現類的組件遠遠多於邏輯類組件。

組件做用域內的 CSS

除非你把組件分佈在多個文件上 (例如 CSS Modules)，CSS 做用域在 React 中是經過 CSS-in-JS 的方案實現的 (好比 styled-components、glamorous 和 emotion)。這引入了一個新的面向組件的樣式範例，它和普通的 CSS 撰寫過程是有區別的。另外，雖然在構建時將 CSS 提取到一個單獨的樣式表是支持的，但 bundle 裏一般仍是須要一個運行時程序來讓這些樣式生效。當你可以利用 JavaScript 靈活處理樣式的同時，也須要權衡 bundle 的尺寸和運行時的開銷。

若是你是一個 CSS-in-JS 的愛好者，許多主流的 CSS-in-JS 庫也都支持 Vue (好比 styled-components-vue 和 vue-emotion)。這裏 React 和 Vue 主要的區別是，Vue 設置樣式的默認方法是單文件組件裏相似 style 的標籤。

單文件組件讓你能夠在同一個文件裏徹底控制 CSS，將其做爲組件代碼的一部分。

<style scoped> @media (min-width: 250px) { .list-container:hover { background: orange; } } </style>

這個可選 scoped 屬性會自動添加一個惟一的屬性 (好比 data-v-21e5b78) 爲組件內 CSS 指定做用域，編譯的時候 .list-container:hover 會被編譯成相似 .list-container[data-v-21e5b78]:hover。

最後，Vue 的單文件組件裏的樣式設置是很是靈活的。經過 vue-loader，你可使用任意預處理器、後處理器，甚至深度集成 CSS Modules——所有都在 <style> 標籤內。

規模

向上擴展

Vue 和 React 都提供了強大的路由來應對大型應用。React 社區在狀態管理方面很是有創新精神 (好比 Flux、Redux)，而這些狀態管理模式甚至 Redux 自己也能夠很是容易的集成在 Vue 應用中。實際上，Vue 更進一步地採用了這種模式 (Vuex)，更加深刻集成 Vue 的狀態管理解決方案 Vuex 相信能爲你帶來更好的開發體驗。

二者另外一個重要差別是，Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。

最後，Vue 提供了 CLI 腳手架，能讓你經過交互式的腳手架引導很是容易地構建項目。你甚至可使用它快速開發組件的原型。React 在這方面也提供了 create-react-app，可是如今還存在一些侷限性：

它不容許在項目生成時進行任何配置，而 Vue CLI 運行於可升級的運行時依賴之上，該運行時能夠經過插件進行擴展。
它只提供一個構建單頁面應用的默認選項，而 Vue 提供了各類用途的模板。
它不能用用戶自建的預設配置構建項目，這對企業環境下預先創建約定是特別有用的。

而要注意的是這些限制是故意設計的，這有它的優點。例如，若是你的項目需求很是簡單，你就不須要自定義生成過程。你能把它做爲一個依賴來更新。若是閱讀更多關於不一樣的設計理念。

向下擴展

React 學習曲線陡峭，在你開始學 React 前，你須要知道 JSX 和 ES2015，由於許多示例用的是這些語法。你須要學習構建系統，雖然你在技術上能夠用 Babel 來實時編譯代碼，可是這並不推薦用於生產環境。

就像 Vue 向上擴展比如 React 同樣，Vue 向下擴展後就相似於 jQuery。你只要把以下標籤放到頁面就能夠運行：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

而後你就能夠編寫 Vue 代碼並應用到生產中，你只要用 min 版 Vue 文件替換掉就不用擔憂其餘的性能問題。

因爲起步階段不需學 JSX，ES2015 以及構建系統，因此開發者只需不到一天的時間閱讀指南就能夠創建簡單的應用程序。

原生渲染

React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP (iOS 和 Android)。能同時跨多平臺開發，對開發者是很是棒的。相應地，Vue 和 Weex 會進行官方合做，Weex 是阿里巴巴發起的跨平臺用戶界面開發框架，同時也正在 Apache 基金會進行項目孵化，Weex 容許你使用 Vue 語法開發不只僅能夠運行在瀏覽器端，還能被用於開發 iOS 和 Android 上的原生應用的組件。

在如今，Weex 還在積極發展，成熟度也不能和 React Native 相抗衡。可是，Weex 的發展是由世界上最大的電子商務企業的需求在驅動，Vue 團隊也會和 Weex 團隊積極合做確保爲開發者帶來良好的開發體驗。

另外一個選擇是 NativeScript-Vue，一個用 Vue.js 構建徹底原生應用的 NativeScript 插件。

MobX

Mobx 在 React 社區很流行，實際上在 Vue 也採用了幾乎相同的反應系統。在有限程度上，React + Mobx 也能夠被認爲是更繁瑣的 Vue，因此若是你習慣組合使用它們，那麼選擇 Vue 會更合理。

Preact 和其它類 React 庫

類 React 的庫們每每儘量地與 React 共享 API 和生態。所以上述比較對它們來講也一樣適用。它們和 React 的不一樣每每在於更小的生態。由於這些庫沒法 100% 兼容 React 生態中的所有，部分工具和輔助庫也可能沒法使用。或者即便看上去能工做，但也有可能隨時發生不兼容，除非你用的這個類 React 庫官方與 React 保持嚴格一致。

AngularJS (Angular 1)

Vue 的一些語法和 AngularJS 的很類似 (例如 v-if vs ng-if)。由於 AngularJS 是 Vue 早期開發的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經獲得解決。

複雜性

在 API 與設計兩方面上 Vue.js 都比 AngularJS 簡單得多，所以你能夠快速地掌握它的所有特性並投入開發。

靈活性和模塊化

Vue.js 是一個更加靈活開放的解決方案。它容許你以但願的方式組織應用程序，而不是在任什麼時候候都必須遵循 AngularJS 制定的規則，這讓 Vue 能適用於各類項目。咱們知道把決定權交給你是很是必要的。

這也是爲何咱們提供了一個基於 Vue.js 進行快速開發的完整系統。Vue CLI 旨在成爲 Vue 生態系統中標準的基礎工具。它使得多樣化的構建工具經過妥善的默認配置無縫協做在一塊兒。這樣你就能夠專一在應用自己，而不會在配置上花費太多時間。同時，它也提供了根據實際需求調整每一個工具配置的靈活性。

數據綁定

AngularJS 使用雙向綁定，Vue 在不一樣組件間強制使用單向數據流。這使應用中的數據流更加清晰易懂。

指令與組件

在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元——有本身的視圖和數據邏輯。在 AngularJS 中，每件事都由指令來作，而組件只是一種特殊的指令。

運行時性能

Vue 有更好的性能，而且很是很是容易優化，由於它不使用髒檢查。

在 AngularJS 中，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環 (digest cycle) 可能要運行屢次。AngularJS 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。

Vue 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步隊列更新，全部的數據變化都是獨立觸發，除非它們之間有明確的依賴關係。

有意思的是，Angular 和 Vue 用類似的設計解決了一些 AngularJS 中存在的問題。

Angular (本來的 Angular 2)

咱們將新的 Angular 獨立開來討論，由於它是一個和 AngularJS 徹底不一樣的框架。例如：它具備優秀的組件系統，而且許多實現已經徹底重寫，API 也徹底改變了。

TypeScript

Angular 事實上必須用 TypeScript 來開發，由於它的文檔和學習資源幾乎所有是面向 TS 的。TS 有不少好處——靜態類型檢查在大規模的應用中很是有用，同時對於 Java 和 C# 背景的開發者也是很是提高開發效率的。

然而，並非全部人都想用 TS——在中小型規模的項目中，引入 TS 可能並不會帶來太多明顯的優點。在這些狀況下，用 Vue 會是更好的選擇，由於在不用 TS 的狀況下使用 Angular 會頗有挑戰性。

最後，雖然 Vue 和 TS 的整合可能不如 Angular 那麼深刻，咱們也提供了官方的類型聲明和組件裝飾器，而且知道有大量用戶在生產環境中使用 Vue + TS 的組合。咱們也和微軟的 TS / VSCode 團隊進行着積極的合做，目標是爲 Vue + TS 用戶提供更好的類型檢查和 IDE 開發體驗。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。