Vue.js

Vue.js是一套用于構建用戶界面的漸進式框架。

漸進式是指，它既可以作為一個庫使用，又可以作為一個框架使用 ，兩個之間自如選擇。庫是不具有侵略性，在原有項目可以引入作為第三方依賴使用；框架是具有侵入性的，整個項目是用vue構建的。

Vue.js誕生

前端技術棧的發(fā)展主要經(jīng)歷了三大階段：
第一階段，基礎靜態(tài)頁面階段。用的是HTML、CSS、JavaScript原生技術。
第二階段，是前端庫/封裝庫的出現(xiàn)，如Query。他們解決了瀏覽器原生API效率低和兼容性的問題。實質上，他們是把原生的API做了二次封裝，操作dom更加簡明，便于開發(fā)和掌握。
第三階段，也就是當今時代，可以稱為“組件化的時代”。這主要因為node的出現(xiàn)，前端開發(fā)者可以借助node開發(fā)各種自動化工具，webpack/各種包管理器，進入催生了一批前端框架的誕生，如Vue.js/React/Angular。前端開發(fā)逐步工具化、工程化。

打包編譯都可以用其他語言實現(xiàn)，但是Node.js出現(xiàn)后，js從只能跑在瀏覽器上轉變?yōu)槟芘茉诓僮飨到y(tǒng)上，熟悉js語言的前端工程師更容易開發(fā)出一系列自動化工具，前端生態(tài)繁榮以來。
vue.js等框架依賴許多底層的提供能力，它定義的語法規(guī)則需要解析，就依賴于語法解析Bable、webpack打包模塊等。

Vue.js三大核心

Vue.js的核心是“數(shù)據(jù)驅動視圖”
它有三大核心特征，響應式/數(shù)據(jù)驅動、組件化、虛擬DOM。

MVVM

MVVVM模型

MVVM，它是一個軟件架構模式。
它包括View、Model和ViewModel三個部分。通俗來說，View是視圖；Model是模型，指存儲數(shù)據(jù)的地方；ViewModel和MVVM的核心，是一個調度者，負責控制數(shù)據(jù)在view 和model之間的流動。

MVVM模式的主要目的是為了分離(View)和(Model)，二者通過ViewModel交互。如此一來，具有低耦合和可重用性的特點。

低耦合性：視圖可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上。
可重用性：在ViewModel中放入視圖邏輯，多個View即可重用這部分的視圖邏輯。

vue實現(xiàn)的MVVM模型

Vue.js實現(xiàn)了MVVM這種模式理念。

View是用戶界面的DOM結構、Model 是JS簡單對象，存數(shù)據(jù)的地方。ViewModel是Vue的實例，由它實現(xiàn)了數(shù)據(jù)的雙向綁定。

Vue()是一個構造函數(shù)，用new
Vue(構造參數(shù))得到的就是一個實例，Vue實例對象是Vue.js中最基本的單元。實例參數(shù)選項有el、data、template、components等。在項目中，
在main.js中通過創(chuàng)建最外層的Vue實例對象來實現(xiàn)根結點、根組件的功能。

圖中ViewModel,也就是vue實例，包含DOM Listeners和Data Bindings兩個工具。Data Bindings 用于將數(shù)據(jù)綁定到 視圖顯示，DOM Listeners 用于監(jiān)聽操作。
從Model側向左看，更新Model中的數(shù)據(jù)時，Data Bindings工具會更新頁面中的DOM元素，這是數(shù)據(jù)的單向綁定；從View側向右看，DOM Listeners工具會監(jiān)測頁面上DOM元素的變化，如果有變化，則更改Model中的數(shù)據(jù)，如此，完成數(shù)據(jù)的雙向綁定，也就實現(xiàn)了數(shù)據(jù)驅動視圖。

Vue可以實現(xiàn)數(shù)據(jù)雙向綁定的原理是：（當一個普通 JavaScript 對象傳給 Vue 實例來作為它的 data 選項時）vue 首先劫持數(shù)據(jù)遍歷他們的屬性，配合發(fā)布者-訂閱者模式的方式，通過js原生aip,Object.defineProperty() 來劫持各個屬性的 setter 和 getter ，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)（訂閱者）相應監(jiān)聽回調。在此基礎上，vue還監(jiān)聽了元素的onChange()，通知更改model層里的數(shù)據(jù)。實現(xiàn)了雙向綁定。

組件化

組件

組件化開發(fā)的模式：是利用JS的可編程性，來管理html、css和js本身。
Vue.js 組件代表一個自給自足的獨立單元，有自己的視圖和數(shù)據(jù)邏輯。
vue.js組件化開發(fā)方式，需要遵循組件框架的規(guī)則約束性開發(fā)，使得代碼的管理性、工程性和可復用性越來越好.

組件與數(shù)據(jù)

• 一個組件的數(shù)據(jù)傳值
  data 選項，它是一個函數(shù)，該組件使用的數(shù)據(jù)是該組件中data返回的數(shù)據(jù)。

組件實例的作用域是相互獨立的，意味著不同組件之間的data數(shù)據(jù)無法相互引用。

• 組件嵌套的數(shù)據(jù)傳值
  prop：父子組件傳值。使得其父子 prop 之間形成了一個單向下行綁定。父組件 prop 的更新會向下流動到子組件中，但是反過來則不行。
  $emit、vuex…其他傳值方法

一個組件默認可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。
使用prop之前，父組件的數(shù)據(jù)用父組件內data數(shù)據(jù)，子組件模板的數(shù)據(jù)用子組件內data數(shù)據(jù)；使用prop之后，子組件標簽的數(shù)據(jù)，可以使用父組件內的data數(shù)據(jù)。

虛擬DOM

DOM :文檔對象模型，是 HTML 提供給js的操作接口。通俗一點說，DOM 就是我們看到的 HTML 結構樹。
虛擬DOM:重寫了DOM提高渲染的性能。

• 原因：
  Vue數(shù)據(jù)驅動視圖，底層是通過各種 API 操作 DOM,頻繁的數(shù)據(jù)變化，會導致頻繁的 DOM 更新。DOM操作昂貴，JS 進程和（瀏覽器）渲染進程會頻繁地通訊、渲染進程頻繁地重繪 DOM，浪費性能。
• 定義：
  一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化的技術，由于這種DOM操作屬于預處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。
• 實現(xiàn)：
  Vue 在內存中維護了一個普通的 JavaScript 對象（也就是虛擬 DOM 樹），這個對象是對真實 DOM 的映射（二者都是樹結構，虛擬 DOM 也保留了真實 DOM 的特征如文本節(jié)點，屬性）。
  當 Vue 準備重繪 DOM 時，會在這棵虛擬 DOM 樹上進行運算，通過 **diff 算法【次數(shù)最少，范圍最小】**計算出虛擬DOM樹和真實DOM樹之間最小的差異。最終，將多次合并、計算后最小 DOM 操作提交給渲染進程，去重繪真實的 DOM。

diff 算法： 一種計算虛擬 DOM 樹和虛擬 DOM 樹之間差異的算法。
虛擬 DOM 計算一定比真實 DOM 渲染開銷小么？是的。前者是計算，后者是進程間通訊與視圖渲染。

//虛擬 DOM 樹
  const virtualDOM = {
    tag: 'div',
    id: 'app',
    children: [{ tag: 'p', innerText: 'Hello World!',class: 'hero-title' },
      {...} // ...]
  }

• Vue.js 2.0 虛擬DOM
  Vue 2.0 引入虛擬 DOM ，渲染速度快了 2-4倍，大大降低了內存消耗。
  通過標記靜態(tài)根節(jié)點，優(yōu)化diff的過程。
• Vue.js 3.0虛擬DOM
  Vue.js 3.0 中標記和提升所有的靜態(tài)根節(jié)點，diff的時候只需要對比動態(tài)節(jié)點內容。
  Fragments（升級vetur插件）、靜態(tài)提升、Patch flag、緩存事件處理函數(shù)

事件

事件監(jiān)聽

在GUI系統(tǒng)中，事件的實現(xiàn)手段有時稱作 消息映射。在Vue.js指事件監(jiān)聽。

在前端的事件，有兩種：

1. 視圖層 => 某 JavaScript 函數(shù)：例如，BUTTON 按鈕的點擊事件觸發(fā)某一個 JS 函數(shù)。
2. 某 JavaScript 語句 => 某 JavaScript 函數(shù)：例如，消息總線。

Vue 是 JavaScript 框架，消息總線方式在 Vue 中和在原生 JavaScript 中沒有區(qū)別。我們在下方討論第一種。
監(jiān)聽原理：實時注冊 +回調。

原生JS與 Vue.js實例

實現(xiàn)效果

代碼對比

事件過程

• 在傳統(tǒng)的原生js中

1. 監(jiān)聽 增加按鈕的點擊事件和回車事件。事件被觸發(fā)時,執(zhí)行addItem()函數(shù)，獲取input框的文本值，生成無序列表一行對應的一組dom元素，包括文本和刪除按鈕。將該dom元素掛載到無序列表的dom樹上。
2. 監(jiān)聽 刪除按鈕的點擊事件。事件被觸發(fā)時，執(zhí)行deleteItem()函數(shù)，從無序列表的dom樹上移除對應的一組節(jié)點。

• 在vue框架中：
  1.使用vue指令 v-model，將input框的值雙向綁定了 inputValue變量。Input框中的文字，實時等于變量 inputValue的值。
  2.無序列表中，使用vue指令v-for 渲染列表，每行是數(shù)組itemArray的每個元素和一個刪除按鈕。
  3.監(jiān)聽 回車事件和增加按鈕的鼠標點擊事件。事件發(fā)生時，執(zhí)行addItem函數(shù)， inputValue的值存入itemArray數(shù)組。數(shù)組更新，列表重新渲染。inputValue值置空，input框文字清空。
  4.監(jiān)聽 刪除按鈕的點擊事件，當事件發(fā)生時，執(zhí)行deleteItem()函數(shù)，刪除itemArray數(shù)組中對應的元素。

使用了Vue.js之后，無需關心 DOM 的操作，只需要關心數(shù)據(jù)的流動，減輕了一定的負擔。

Vue.js優(yōu)點

其他注意點

• 為什么vue組件中data必須是一個函數(shù)？
  對象為引用類型，當復用組件時，由于數(shù)據(jù)對象都指向同一個data對象，當在一個組件中修改data時，其他重用的組件中的data會同時被修改；而使用返回對象的函數(shù)，由于每次返回的都是一個新對象（Object的實例），引用地址不同，則不會出現(xiàn)這個問題。

• 每個Vue應用是通過Vue函數(shù)創(chuàng)建的實例開始的。把組件掛載在某一個元素上。
  單頁面(new vm) 和 項目(main.js)

• 生命周期？
  生命周期總共分為8個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。在八個時間點，分別拋出八個鉤子，把操縱寫在鉤子中
  ①創(chuàng)建前/后：在beforeCreate階段，vue實例的掛載元素el和數(shù)據(jù)對象data都為undefined，還未初始化。在created階段，vue實例的數(shù)據(jù)對象data有了，el為undefined，還未初始化。
  ②載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
  ③更新前/后：當data變化時，會觸發(fā)beforeUpdate和updated方法
  ④銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結構依然存在

Element-UI

Element-UI是為Vue.js服務的UI組件庫。

UI組件庫，一堆組件的集合。對Html/css/js資源的封裝的集合，呈現(xiàn)出的界面樣式。

Element-Ui是由餓了么團隊開發(fā)的一個UI組件庫。
官網(wǎng)上介紹：“網(wǎng)站快速成型工具，一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的桌面端組件庫?！?/p>

GUI 工具

GUI工具/前端框架的底層實現(xiàn)，有兩個共同的核心的的部分：數(shù)據(jù)綁定+消息響應。

消息響應/監(jiān)聽事件必然有兩種機制：輪詢、中斷。
Vue.js的監(jiān)聽使用的是中斷方式。

GUI工具/框架迭代速度快，學習的時候要注意學習底層。注意總結**共性（layout、數(shù)據(jù)綁定、消息響應）**之處。這樣在學習新的工具時，就會很容易的上手了 。文章來源地址http://www.zghlxwxcb.cn/news/detail-598468.html

到了這里，關于Vue與Element-UI的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！