Vue項目基礎

時間 2019-11-21

標籤 vue 項目基礎简体版

原文原文鏈接

一. Vue

1. 概念

1). Vue是一個MVVM庫

MVC（Model-View-Controller）：javascript

M指的是從後臺獲取到的數據，html

V指的是顯示動態數據的html頁面，vue

C是指響應用戶操做、通過業務邏輯處理後去更新視圖的過程，在此過程當中會致使對view層的引用。html5

MVVM (Model-View-ViewModel)：
MVVM是MVC的一個衍生模型，這裏的 ViewModel把業務邏輯處理、用戶輸入驗證等跟視圖更新操做分離開了。MVVM是數據驅動的，咱們只須要關心數據的處理邏輯便可，它會經過模板渲染去單獨處理視圖的更新而不須要咱們親自去操做Dom元素。java

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

Vue的核心的功能，是一個視圖模板引擎，但這不是說Vue就不能成爲一個框架。以下圖所示，這裏包含了Vue的全部部件，在聲明式渲染（視圖模板引擎）的基礎上，咱們能夠經過添加組件系統、客戶端路由、大規模狀態管理來構建一個完整的框架。更重要的是，這些功能相互獨立，你能夠在覈心功能的基礎上任意選用其餘的部件，不必定要所有整合在一塊兒。能夠看到，所說的「漸進式」，其實就是Vue的使用方式，同時也體現了Vue的設計的理念。node

漸進式表明的含義是：主張最少。jquery

每一個框架都不可避免會有本身的一些特色，從而會對使用者有必定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。正則表達式

好比說，Angular，它兩個版本都是強主張的，若是你用它，必須接受如下東西：vue-router

必須使用它的模塊機制- 必須使用它的依賴注入
必須使用它的特殊形式定義組件（這一點每一個視圖框架都有，難以免）

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

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

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

漸進式的含義，沒有多作職責以外的事。

3). 聲明式渲染也叫做響應式渲染

聲明式：告訴「機器」你想要的是什麼(what)，讓機器想出如何去作(how)。例如：Vue、React。

在Vue中聲明瞭message變量，當message變量的值改變時，文本對象的值會自動改變，這是聲明式。經過Vue不只能夠經過聲明的方式修改文本對象，還能夠修改全部dom對象，包括四種類型（document、Node、Element、Text、Attributes）的對象。

命令式：命令「機器」如何去作事情(how)，這樣無論你想要的是什麼(what)，它都會按照你的命令實現。例如：jquery、JavaScript。

經過javascript的方式修改文本對象的值，咱們須要先獲取文本對象，而後給文本對象賦值，這是命令式。

4). 雙向綁定/數據驅動

雙向中的兩方分別是：Vue.js中的數據和DOM的對象。 VUE實現雙向數據綁定的原理就是經過數據劫持結合發佈者-訂閱者模式的方式來實現的。即利用的是ES5的Object.defineProperty和存儲器屬性: getter和setter（因此只兼容IE9及以上版本），可稱爲基於依賴收集的觀測機制。核心是VM，即ViewModel，保證數據和視圖的一致性。當修改Vue中數據時，dom的對象會自動修改，當修改dom的對象時，Vue的數據也會自動修改。

當你把一個普通的 JavaScript 對象傳入 Vue 實例做爲 data 選項，Vue將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。Object.defineProperty 是ES5 中一個沒法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的緣由。

這些 getter/setter 對用戶來講是不可見的，可是在內部它們讓 Vue可以追蹤依賴，在屬性被訪問和修改時通知變動。每一個組件實例都對應一個 watcher 實例，它會在組件渲染的過程當中把「接觸」過的數據屬性記錄爲依賴。以後當依賴項的setter 觸發時，會通知 watcher，從而使它關聯的組件從新渲染。

受現代 JavaScript 的限制(並且 Object.observe 也已經被廢棄)，Vue 沒法檢測到對象屬性的添加或刪除。因爲 Vue會在初始化實例時對屬性執行 getter/setter轉化，因此屬性必須在 data 對象上存在才能讓 Vue 將它轉換爲響應式的。因爲 Vue不容許動態添加根級響應式屬性，因此你必須在初始化實例前聲明全部根級響應式屬性，哪怕只是一個空值。若是你未在 data 選項中聲明 message，Vue將警告你渲染函數正在試圖訪問不存在的屬性。

5). 異步更新隊列

Vue 在更新 DOM 時是異步執行的。只要偵聽到數據變化，Vue將開啓一個隊列，並緩衝在同一事件循環中發生的全部數據變動。若是同一個 watcher被屢次觸發，只會被推入到隊列中一次。當你設置 vm.someData = 'new value'，該組件不會當即從新渲染。當刷新隊列時，組件會在下一個事件循環「tick」中更新。爲了在數據變化以後等待 Vue 完成更新DOM，能夠在數據變化以後當即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM更新完成後被調用。$nextTick() 返回是一個 Promise 對象。

methods: {
   updateMessage: async function () {
   this.message = '已更新'
   console.log(this.\$el.textContent) // =\> '未更新'
 await this.\$nextTick()
 console.log(this.\$el.textContent) // =\> '已更新'
   }
  }
複製代碼

6). 組件化

實現了擴展HTML元素，封裝可重用的代碼。每個組件都對應一個ViewModel。頁面上每一個獨立的可視/可交互區域均可以視爲一個組件。每一個組件對應一個工程目錄，組件所須要的各類資源在這個目錄下就進維護。頁面是組件的容器，組件能夠嵌套自由組合造成完整的頁面。

2. 生命週期

vue框架的入口就是Vue實例，每一個Vue實例在被建立以前都要通過一系列的初始化過程,這個過程就是vue的生命週期。

在vue一整個的生命週期中會有不少鉤子函數提供給咱們在vue生命週期不一樣的時刻進行操做。鉤子函數相似於回調事件，當vue的實例進行到某處時會檢查是否有對應的鉤子函數，有則執行回調函數。

1). beforeCreate

進行初始化事件，進行數據的觀測，能夠看到在created的時候數據已經和data屬性進行綁定（放在data中的屬性當值發生改變的同時，視圖也會改變），可是沒有el選項。

2). created

判斷對象是否有el選項。若是有的話就繼續向下編譯，若是沒有el選項，則中止編譯，也就意味着中止了生命週期，直到在該vue實例上調用vm.$mount(el)。

若是vue實例對象中有template參數選項，則將其做爲模板編譯成render函數。

若是沒有template選項，則將外部HTML做爲模板編譯。

能夠看到template中的模板優先級要高於outer HTML的優先級。

3). beforeMount

給vue實例對象添加$el成員，而且替換掉掛在的DOM元素。

4). mounted

經過虛擬DOM渲染頁面元素內容。

5). beforeUpdate

當vue發現data中的數據發生了改變，會觸發對應組件的從新渲染，渲染前的鉤子函數。

6). updated

當vue發現data中的數據發生了改變，會觸發對應組件的從新渲染，渲染後的鉤子函數。

7). beforeDestroy

鉤子函數在實例銷燬以前調用。在這一步，實例仍然徹底可用。

8). destroyed

鉤子函數在Vue 實例銷燬後調用。調用後，Vue實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

3. 語法

頁面綁定的指令均可以是變量、對象的屬性也能夠是表達式，但只能是單個語句表達式，好比三元運算符。

以v-開頭的都被叫作指令。當表達式的值改變時，將其產生的連帶影響，響應式地做用於DOM。

純文本。元素節點若是綁定 v-once指令，能執行一次性地插值，當數據改變時，插值處的內容不會更新。

v-text="message"

元素內綁定字符串

v-html=」html」

元素內傳遞HTML標籤

v-bind

能夠簡寫成: 。用於綁定頁面DOM元素上的屬性值，好比 :src 、 :type

:style 支持樣式數組、對象和直接寫樣式

:class支持數組、對象和三元表達式對其賦值，動態的切換class

v-model

v-model 指令用來表單元素的雙向綁定，v-model

會根據控件類型自動選取正確的方法來更新元素。在input、select、textarea、checkbox、radio等表單控件元素上建立雙向數據綁定，根據表單> 上的值，自動更新綁定的元素的值。

v-model.lazy

默認狀況下， v-model 在 input 事件中同步輸入框的值與數據，但你能夠添加一個修飾符lazy ，從而轉變爲在 change 事件中同步，即只有input輸入框失去焦點的時候才同步

v-model.number

自動將用戶的輸入值轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值）

v-model.trim

自動過濾用戶輸入的首尾空格

v-on

能夠簡寫成@。用來綁定事件監聽器，事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句。用在普通元素上時，只能監聽原生DOM 事件。在監聽原生 DOM事件時，方法以事件爲惟一的參數。若是使用內聯語句進行傳參，語句能夠訪問一個 $event 屬性。 v-on能夠以綁定修飾符。修飾符是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。

事件修飾符： .stop阻止事件冒泡 .once只能響應一次 …

按鍵修飾符 .enter 捕獲回車鍵 .delete捕獲 "刪除" 和 "退格" .space 捕獲空格鍵 ...

v-pre

跳過某元素和他的子元素的編譯，能夠用來顯示原始Mustache標籤

v-cloak

使某元素保持某種指定行爲，直到與該元素相關的實例編譯結束。隱藏未編譯的標籤，一般用來解決{{}}表達式閃爍問題

v-once

只渲染元素和組件一次，以後從新渲染，該元素和組件均會被視做靜態內容跳過

v-for

遍歷數組或者對象，基於數據源屢次渲染元素或模板塊。 v-for 屬性值是一個 item inexpression 結構的表達式，其中 item 表明 expression 運算結果的每一項。除了item in items 這種形式還能夠用（value，key） in Objects 或者（value，key,index） in Objects來循環遍歷。也支持對整數的循環。

v-if、v-else-if、v-else

條件渲染指令，動態插入或刪除元素。經過表達式結果的真假來插入和刪除元素。 v-if能夠單獨使用，而 v-else-if 、 v-else 必須和 v-if 一塊兒使用。

v-show

條件渲染指令，動態顯示或隱藏元素。符合表達式結果判斷的元素內容將被顯示，不符合結果判斷的元素將被隱藏

filters

{{ message \| capitalize }} v-bind:id="rawId \| formatId"

過濾器能夠用在兩個地方：mustache 插值和 v-bind表達式。容許自定義過濾器，對常見的文本進行格式化。過濾器是 JavaScript函數，所以能夠接受參數。

computed

計算屬性。computed是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值。而使用 methods，在從新渲染的時候，函數總會從新調用執行。即 computed會緩存數據，當改變時纔會去從新取值。而寫在methods 中的則不會被緩存。

$watch

監聽屬性。Watch經過對象中建立的方式去實時監聽數據變化並改變自身的值。

Vue.component(tagName, options)

tagName 爲組件名，options爲配置選項。當註冊成功後，再頁面用<tagName></tagName>方式調用。

prop

prop 是父組件用來傳遞數據的一個自定義屬性。父組件的數據須要經過 props 把數據傳給子組件，子組件須要顯式地用 props 選項聲明"prop"。用v-bind 指令能夠綁定props，可是prop是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。子組件聲明時候能夠驗證prop的類型。可使String、Number、Boolean、Function、Object和Array。子組件在methods中定義的事件，可讓父組件使用v-on監聽事件，也能夠用$emit觸發事件。子組件的data，不能是一個對象。這樣能夠不會影響到其餘實例。

directives

Vue支持自定義註冊全局與局部指令。

指令定義函數提供了幾個鉤子函數（可選）：

bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。

inserted: 被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於 document 中）。

update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新（詳細的鉤子函數參數見下）。

componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。

unbind: 只調用一次，指令與元素解綁時調用。

鉤子函數的參數有：

el: 指令所綁定的元素，能夠用來直接操做 DOM 。

binding: 一個對象，包含如下屬性：

name: 指令名，不包括 v- 前綴。

value: 指令的綁定值，例如： v-my-directive="1 + 1", value 的值是 2。

oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。

expression: 綁定值的表達式或變量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

arg: 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 "foo"。

modifiers: 一個包含修飾符的對象。例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。

vnode: Vue 編譯生成的虛擬節點。

oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

二. Vue

1. 概念

Vuex 是一個專爲 Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態即全局狀態管理，並以相應的規則保證狀態以一種可預測的方式發生變化。當多個不是父子關係的組件須要共享狀態時，就須要用到vuex。即把須要共享的變量存儲在組件以外的對象裏面，全局單例的狀態管理樹中的變量。

Vuex 和單純的全局對象有如下兩點不一樣：

Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交(commit)mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

2. Store

「store」基本上就是一個容器，它包含着你的應用中大部分的狀態。理解爲存儲於內存中的數據倉庫。

3. State

單一狀態樹中的變量，用來存儲狀態。用一個對象就包含了所有的應用層級狀態。即state、mutation、action、getter和嵌套子模塊。

4. Getter

computed計算屬性，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。相似於get、set中的get。有兩個可選參數：state、getters分別能夠獲取state中的變量和其餘的getters。調用方式：store.getters.XXX

5. Mutations

提交狀態修改。相似於get、set中的set。也是vuex中惟一修改state的方式，只支持同步操做。第一個參數默認是state。

調用方式：store.commit('SET_XXX', XXX)

6. Actions

Action相似於mutations，不一樣的是不能直接變動狀態。actions支持異步操做。第一個參數默認是和store具備相同參數屬性的對象。

調用方式：store.dispatch(‘XXX’)

7. Modules

store的分割子模塊，內容就至關因而store的一個實例。每一個模塊擁有本身的state、mutation、action、getter、甚至是嵌套子模塊。可添加namespaced:true來添加獨立的命名空間。例如：store.dispatch(‘moduleName/XXX’) 調用子模塊的方式：store.module.state.xxx

三. VueRouter

1. 概念

vue-router是 Vue.js 官方的路由管理器。具備模塊化的、基於組件的路由配置、細粒度的導航控制等等特色。它的做用是經過映射配置渲染對應的組件。

當兩個路由渲染同一組件時，原來的組件會被複用，雖然效率提升但組件的生命週期鉤子函數也不會被調用。

route是一條路由，url和函數的映射。

routes，是一組路由。

router管理一組route，它能夠理解爲一個容器，或者說一種機制。

路徑匹配規則支持正則表達式。

以 / 開頭的嵌套路徑會被看成根路徑。

若是有設置嵌套路由，父路由不會渲染任何組件，只有設置空的子路由或者重定向才能夠定位到父路由。

同一個路徑能夠匹配多個路由，誰先定義誰的優先級最高。

2. 導航守衛

導航守衛是指經過發生改變或者取消的方式守衛導航。在路由導航改變的過程當中植入導航守衛。參數或查詢的改變並不會觸發進入/離開的導航守衛。

解析流程：

導航被觸發。
在失活的組件裏調用離開守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

使用 router.beforeEach 註冊一個全局前置守衛。當一個導航觸發時，全局前置守衛按照建立順序調用。守衛是異步解析執行，此時導航在全部守衛 resolve 完以前一直處於等待中。

每一個守衛方法接收三個參數：

to: Route:

即將要進入的目標路由對象

from: Route:

當前導航正要離開的路由

next: Function:

必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。必定要調用 next 方法，不然鉤子就不會被 resolved。

next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了 (多是用戶手動或者瀏覽器後退按鈕)，那麼 URL地址會重置到 from 路由對應的地址。

next('/') 或者 next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。你能夠向 next 傳遞任意位置對象，且容許設置諸如 replace: true、name:'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

next(error): (2.4.0+) 若是傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回調。

3. API

<router-link>

經過 to 屬性指定目標地址，默認渲染成帶有正確連接的 <a> 標籤，能夠經過配置 tag屬性生成別的標籤.。另外，當目標路由成功激活時，連接元素自動設置一個表示激活的CSS 類名。

to：

目標路由的連接。值能夠是一個字符串或者是描述目標位置的對象

replace：

導航後不會留下 history 記錄

append：

在當前 (相對) 路徑前添加基路徑。例如：/a append b = /a/b

tag：

把a標籤渲染成定義的標籤

active-class：

連接激活時使用的 CSS 類名

<router-view>

組件是一個 functional 組件，渲染路徑匹配到的視圖組件。<router-view>渲染的組件還能夠內嵌本身的 <router-view>，根據嵌套路徑，渲染嵌套組件。可配合 <transition> 和 <keep-alive> 使用，緩存組件。

name：

渲染對應的路由配置中 components 下的相應組件。

Router參數

mode：

值爲history/ hash。默認hash，使用 URL 的 hash 來模擬一個完整的URL瀏覽器url連接中會帶有#，#後面的hash值的變化不會影響瀏覽器發出新請求。每次變化都會觸發hasChange變化，監聽變化更新頁面。 URL改變時，頁面不會從新加載。history模式,就是直接匹配的/,這種模式充分利用 history.pushState API來完成URL跳轉而無需從新加載頁面。