Vue簡單知識點

時間 2019-11-14

標籤 vue 簡單知識简体版

原文原文鏈接

vue生命週期的理解

什麼是vue生命週期？

Vue 實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。javascript

vue生命週期總共有幾個階段？

總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後css

beforeCreate（建立前） ： Vue 實例的掛載元素 $el 和數據對象data都爲undefined，還未初始化。
created（建立後） ：完成數據觀測，屬性和方法的運算，初始化事件， $el 尚未。
beforeMount（載入前） ：Vue 實例的 $el 和 data 都初始化了，但仍是掛載以前爲虛擬的 dom節點，
data.message 還未替換。
mounted（載入後） : Vue 實例掛載完成，data.message 成功渲染。
beforeUpdate（更新前） ：當 data 發生變化時，在DOM從新渲染以前調用。
updated（更新後） ：在 DOM 從新渲染以後調用。
beforeDestroy（銷燬前） ：在 Vue 實例銷燬以前調用。實例仍然徹底可用。
destroyed（銷燬後） ：在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被
銷燬。

vue生命週期的做用是什麼？

這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。多個事件鉤子，可讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。html

DOM 渲染在哪一個週期中就已經完成？

mounted 週期中就已經完成。vue

描述每一個週期具體適合哪些場景？

beforecreate : 能夠在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
mounted : 掛載元素，獲取到DOM節點
updated : 若是對數據統一處理，在這裏寫上相應函數
beforeDestroy : 能夠作一個確認中止事件的確認框
nextTick : 更新數據後當即操做dom

第一次頁面加載會觸發哪幾個鉤子？

beforeCreate, created, beforeMount, mounted這幾個鉤子會被觸發。java

說一下你對於MVVM 的理解

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。vuex

有三部分組成：shell

Model 表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯。
View 表明 UI 組件，它負責將數據模型轉化成 UI 展示出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model 的
對象，鏈接 Model 和 View。

在 MVVM 架構下， View 和 Model 之間並無直接的聯繫，而是經過 ViewModel 進行交互， Model 和ViewModel 之間的交互是雙向的，所以 View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到 View 上。

ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而 View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM，不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

簡述一下Sass、Less，且說明區別？

他們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。所謂CSS預處理器，就是用一種專門的編程語言，進行 Web 頁面樣式設計，再經過編譯器轉化爲正常的 CSS 文件，以供項目使用。npm

變量符不同，less是@，而Sass是$。
Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持。
Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器。

如何讓CSS只在當前組件中起做用?

將當前組件的 <style> 修改成<style scoped>編程

Vue中使用插件的步驟

在項目文件夾下,使用命令 npm install 插件名稱 --save-dev 引入插件。
採用 ES6 的 import ... from ... 語法或 CommonJS 的 require() 方法引入插件。
使用全局方法 Vue.use( plugin ) 使用插件,能夠傳入一個選項對象 Vue.use(MyPlugin, { someOption: true })。

單向數據流和雙向數據綁定

單向數據流：顧名思義，數據流是單向的。數據流動方向能夠跟蹤，流動單一，追查問題的時候能夠更快捷。缺點就是寫起來不太方便。要使 UI 發生變動就必須建立各類 action來維護對應的 state。
雙向數據綁定：數據之間是相通的，將數據變動的操做隱藏在框架內部。優勢是在表單交互較多的場景下，會簡化大量與業務無關的代碼。缺點就是沒法追蹤局部狀態的變化，增長了出錯時 debug 的難度。

Vue實現數據雙向綁定的原理

vue 實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty()來劫持各個屬性的 setter ， getter ，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉爲 getter/setter 。用戶看不到 getter/setter ，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定將 MVVM 做爲數據綁定的入口，整合 Observer ， Compile 和 Watcher 三者，經過Observer 來監聽本身的 model 的數據變化，經過 Compile 來解析編譯模板指令，最終利用 watcher 搭起 observer 和 Compile 之間的通訊橋樑，達到數據變化 —視圖更新；視圖交互變化input數據 model 變動雙向綁定效果。

注：具體的過程可參考這篇文章後端

v-if 和 v-show 區別

相同點

二者都是在判斷DOM節點是否要顯示。
不一樣點
一、實現方式

v-if是根據後面數據的真假值判斷直接從Dom樹上刪除或重建元素節點

v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

v-if是根據後面數據的真假值判斷直接從Dom樹上刪除或重建元素節點

v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

二、編譯過程

v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件；

v-show只是簡單的基於css切換；

v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件； 

v-show只是簡單的基於css切換；

三、編譯條件

v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部編譯；

v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素始終被保留；

v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部編譯；

v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素始終被保留；

四、性能消耗

v-if有更高的切換消耗，不適合作頻繁的切換；

v-show有更高的初始渲染消耗，適合作頻繁的額切換；

注：轉載於LeonWuV

v-for 與 v-if

官網上的解釋這裏，不推薦在同一元素上使用 v-if 和 v-for。當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。

計算屬性 computed 和 methods 有什麼區別

computed：計算屬性是基於它們的依賴屬性進行緩存的，只有在它的相關依賴發生改變時纔會從新求值。
method：只要被觸發從新渲染， method 調用總會執行該函數。

注： 頁面中最好不要直接使用函數，儘可能使用computed

vue組件化的理解與使用

組件是可複用的 Vue 實例, 若是網頁中的某一個部分須要在多個場景中使用，那麼咱們能夠將其抽出爲一個組件進
行復用。組件大大提升了代碼的複用率。

使用步驟：

1.先使用import導入你要在該組件中使用的子組件

2.而後,在components中寫入子組件

3.在template中就能夠直接使用了

Vue 組件 data 爲何必須是函數

其實在vue的基礎中就有明確的規定，看這裏

在 new Vue() 中， data 是能夠做爲一個對象進行操做的，然而在 component 中， data 只能以函數的形式
存在，不能直接將對象賦值給它。
當data選項是一個函數的時候，每一個實例能夠維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不
會相互影響，是獨立的

Vue組件間的參數傳遞

父組件與子組件傳遞數據

父組件傳給子組件：子組件經過 props 方法接受父組件傳遞的數據
子組件傳給父組件： $emit 方法傳遞參數

非父子組件間的數據傳遞，兄弟組件傳值

可經過 PubSubJS 庫來實現非父子組件之間的通訊，使用 PubSubJS 的消息發佈與訂閱模式，來進行數據的傳遞。

參考這篇文章

路由之間跳轉

可分爲兩大類，三小類

（聲明式）路由標籤跳轉：<router-link :to=``"{path, params, query}"``></router-link>

（編程式）params方式傳參：router.push('/index/query/name/id')

（編程式）query方式傳參：router.push('/index/query?name=name&id=id')

注：query方法的參數會以字符串拼接的形式（key=value）展現在地址欄。params方式可能因爲路由配置的問題取不到參數。

Vue 路由的實現

hash 模式

在瀏覽器中符號 # ，# 以及#後面的字符稱之爲 hash ，用 window.location.hash 讀取。

特色： hash 雖然在 URL中，但不被包括在 HTTP 請求中；用來指導瀏覽器動做，對服務端安全無用， hash 不會重加載頁面。

history 模式

history 採用 HTML5 的新特性；且提供了兩個新方法： pushState() ， replaceState() 能夠對瀏覽器歷史記錄棧進行修改，以及 popState 事件的監聽到狀態變動.

參考monkeyWang的這篇文章

$route和$router的區別

$route 是「路由信息對象」，包括 path ， params ， hash ， query ， fullPath ， matched ， name 等路由信息
參數。
而 $router 是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

vuex 是什麼？

官方話：Vuex 是一個專爲 `Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

簡單的說：Vuex是vue框架中狀態管理。

什麼是「狀態管理模式」？

把組件的共享狀態抽取出來，以一個全局單例模式管理。在這種模式下，咱們的組件樹構成了一個巨大的「視圖」，無論在樹的哪一個位置，任何組件都能獲取狀態或者觸發行爲！這就是「狀態管理模式」。

來源於這片文章

Vuex有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module

怎麼使用？

一、利用npm包管理工具，進行安裝 vuex。

npm install vuex --save

二、新建一個store的文件夾，在文件夾中新建store.js文件，文件中引入vue和vuex

import Vue from 'vue';
import Vuex from 'vuex';

三、使用咱們vuex，引入以後用Vue.use進行引用。

Vue.use(Vuex);

四、main.js文件中引入新建的store.js文件。

import storeConfig from './src/srore'

五、實例化vue對象的時候加入其中（app.vue中）

注：這篇文章不錯以及這篇

哪一種功能場景使用它？

場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車。

state ： Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存
放的數據狀態，不能夠直接修改裏面的數據。
mutations ： mutations 定義的方法動態修改 Vuex 的 store 中的狀態或數據
getters ：相似 vue 的計算屬性，主要用來過濾一些數據。
action ： actions 能夠理解爲經過將 mutations 裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說
就是異步操做數據。 view 層經過 store.dispath 來分發 action
modules ：項目特別複雜的時候，可讓每個模塊擁有本身的 state 、 mutation 、 action 、 getters，使得結構很是清晰，方便管理。