面試官：說說你對vue的理解?

1、web發展歷史

Web是World Wide Web的簡稱，中文譯爲萬維網html

咱們能夠將它規劃成以下的幾個時代來進行理解前端

石器時代
文明時代
工業革命時代
百花齊放時代

石器時代

石器時代指的就是咱們的靜態網頁，能夠欣賞一下1997的Apple官網vue

最先的網頁是沒有數據庫的，能夠理解成就是一張能夠在網絡上瀏覽的報紙，直到CGI技術的出現java

經過 CGI Perl 運行一小段代碼與數據庫或文件系統進行交互，如當時的Google（1998年）react

文明時代

ASP，JSP你們應該都不會太陌生，最先出現於 2005 年左右，前後出現了微軟的 ASP 和 Java Server Pages [JSP] 等技術,取代了 CGI ，加強了 WEB 與服務端的交互的安全性，相似於下面這樣，其實就是Java + HTMLjquery

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSP demo</title>
</head>
<body>
  <img src="http://localhost:8080/web05_session/1.jpg" width=200 height=100 />
</body>
</html>

JSP有一個很大的缺點，就是不太靈活，由於JSP是在服務器端執行的，一般返回該客戶端的就是一個HTML文本。咱們每次的請求：獲取的數據、內容的加載，都是服務器爲咱們返回染完成以後的 DOM，這也就使得咱們開發網站的靈活度大打折扣web

在這種狀況下，同年：Ajax火了(小細節，這裏爲何說火了，由於 Ajax 技術並非 2005 年出現的，他的雛形是 1999 年)，如今看來很常見的技術手段，在當時但是珍貴無比算法

工業革命時代

到這裏你們就更熟悉了，vue-cli

移動設備的普及，Jquery的出現，以及SPA（Single Page Application 單頁面應用）的雛形，Backbone EmberJS AngularJS 這樣一批前端框架隨之出現，但當時SPA的路很差走，例如SEO問題，SPA 過多的頁面、複雜場景下 View 的綁定等，都沒有很好的處理數據庫

這幾年的飛速發展，節約了開發人員大量的精力、下降了開發者和開發過程的門檻，極大提高了開發效率和迭代速度，咱們能夠稱之其爲工業時代

百花齊放時代

這裏沒有文字，放一張圖感覺一下

PS：這裏爲何要說這麼多Web的歷史，咱們能夠看到Web技術的變化之大與快，每一種新的技術出現都是一些特定場景的解決方案，那咱們今天的主角Vue又是爲了解決什麼呢？

咱們接着往下看

2、vue是什麼

Vue.js（/vjuː/，或簡稱爲Vue）

是一個用於建立用戶界面的開源JavaScript框架，也是一個建立單頁應用的Web應用框架。 2016年一項針對JavaScript的調查代表，Vue有着89%的開發者滿意度。在GitHub上，該項目平均天天能收穫95顆星，爲Github有史以來星標數第3多的項目

同時也是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發。Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地獲取數據更新，並經過組件內部特定的方法實現視圖與模型的交互

PS: Vue做者尤雨溪是在爲AngularJS工做以後開發出了這一框架。他聲稱本身的思路是提取Angular中爲本身所喜歡的部分，構建出一款至關輕量的框架

最先發佈於2014年2月

3、Vue核心特性

數據驅動（MVVM)

MVVM表示的是 Model-View-ViewModel

Model：模型層，負責處理業務邏輯以及和服務器端進行交互
View：視圖層：負責將數據模型轉化爲UI展現出來，能夠簡單的理解爲HTML頁面
ViewModel：視圖模型層，用來鏈接Model和View，是Model和View之間的通訊橋樑

這時候須要一張直觀的關係圖，以下

組件化

1.什麼是組件化

一句話來講就是把圖形、非圖形的各類邏輯均抽象爲一個統一的概念（組件）來實現開發的模式，在Vue中每個.vue文件均可以視爲一個組件

2.組件化的優點

下降整個系統的耦合度，在保持接口不變的狀況下，咱們能夠替換不一樣的組件快速完成需求，例如輸入框，能夠替換爲日曆、時間、範圍等組件做具體的實現
調試方便，因爲整個系統是經過組件組合起來的，在出現問題的時候，能夠用排除法直接移除組件，或者根據報錯的組件快速定位問題，之因此可以快速定位，是由於每一個組件之間低耦合，職責單一，因此邏輯會比分析整個系統要簡單
提升可維護性，因爲每一個組件的職責單一，而且組件在系統中是被複用的，因此對代碼進行優化可得到系統的總體升級

指令系統

解釋：指令 (Directives) 是帶有 v- 前綴的特殊屬性

做用：當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM

經常使用的指令
- 條件渲染指令 v-if
- 列表渲染指令v-for
- 屬性綁定指令v-bind
- 事件綁定指令v-on
- 雙向數據綁定指令v-model

沒有指令以前咱們是怎麼作的？是否是先要獲取到DOM而後在....乾點啥

4、Vue跟傳統開發的區別

沒有落地使用場景的革命不是好革命，就以一個高頻的應用場景來示意吧

註冊帳號這個需求你們應該很熟悉了，以下

用jquery來實現大概的思路就是選擇流程dom對象，點擊按鈕隱藏當前活動流程dom對象，顯示下一流程dom對象

以下圖(代碼就不上了，上了就篇文章就沒了..)

用vue來實現，咱們知道vue基本不操做dom節點，雙向綁定使dom節點跟視圖綁定後，經過修改變量的值控制dom節點的各種屬性。

因此其實現思路爲：視圖層使用一變量控制dom節點顯示與否，點擊按鈕則改變該變量，以下圖

總結就是：

Vue全部的界面事件，都是隻去操做數據的，Jquery操做DOM
Vue全部界面的變更，都是根據數據自動綁定出來的，，Jquery操做DOM

5、Vue和React對比

這裏就作幾個簡單的類比吧，固然沒有好壞之分，只是使用場景不一樣

相同點

都有組件化思想
都支持服務器端渲染
都有Virtual DOM（虛擬dom）
數據驅動視圖
都有支持native的方案：Vue的weex、React的React native。
都有本身的構建工具：Vue的vue-cli、React的Create React App 。

區別

數據變化的實現原理不一樣。react使用的是不可變數據，而Vue使用的是可變的數據
組件化通訊的不一樣。react 中咱們經過使用回調函數來進行通訊的，而Vue中子組件向父組件傳遞消息有兩種方式：事件和回調函數
diff算法不一樣。react主要使用diff隊列保存須要更新哪些DOM，獲得patch樹，再統一操做批量更新DOM。Vue 使用雙向指針，邊對比，邊更新DOM。

參考文獻

@JS每日一題