技術標籤：VUEvue.js

1、vue與react的區別

vue和react的區別

兩者本質的區別：模板和元件化的區別

Vue本質是MVVM框架，由MVC發展而來；

React是前端元件化框架，由後端元件化發展而來；

Vue使用模板

React使用JSX

React本身就是元件化

Vue是在MVVM上擴充套件的

共同點：都支援元件化，都是資料驅動檢視

2、vue生命週期

生命週期函式

元件的建立（1次）

beforeCreate()  在這個鉤子執行的時候，只有例項本身的一些事件和生命週期函式

created()	在這鉤子函式執行的時候，data和methods中的資料已經能夠使用了 最早使用data中的資料

元件的掛載（1次）

beforeMount() 在這個鉤子執行的時候,已經在記憶體中渲染好模板，但是還沒有輸出頁面上

這個時候指令已經解析完畢

mounted() 在這個鉤子執行的時候 頁面和記憶體已經同步 mounted是最早操作dom節點的函式

元件的執行（0到n次）

beforeUpdate()  當data中的資料發生改變的時候會被呼叫，這個函式中記憶體已經發生改變，但是頁面還是舊的

updated() 記憶體中的資料已經和頁面同步起來

元件的銷燬

beforeDestroy() data中的資料還是能用的  一般情況下用來釋放記憶體 比如清楚定時器

destroyed()	元件已經不復存在
 

還有三種不常用的生命週期知道就行平時用不到 1、activated(元件啟用時) 2、deactivated(元件未啟用時) 3、errorCaptured(錯誤呼叫)

3、created()和mounted()的區別

created()最早使用data中的資料 mounted()最早操作dom節點的函式

4、vue中data為什麼必須是一個函式

data是一個函式時，每個元件例項都有自己的作用域，每個例項相互獨立，不會相互影響。Object是引用資料型別，如果不用function返回，每個元件的data都是記憶體的同一個地址，一個數據改變了其他也改變了。

5、watch、computed和methods的區別

computed 計算屬性 計算結果會快取,只有當依賴值改變才會重新計算

watch 監聽屬性 一個值的改變  需要另一個值的改變而改變,結果不會快取

methods 事件方法 呼叫一次，執行一次,結果不會快取

6、vue元件通訊

**第一種：父傳子：主要通過 props 來實現的**

具體實現：父元件通過 import 引入子元件，並註冊，在子元件標籤

上新增要傳遞的屬性，子元件通過 props 接收，接收有兩種形式一是通過數

組形式[‘要接收的屬性’ ]，二是通過物件形式{ }來接收，物件形式可以

設定要傳遞的資料型別和預設值，而陣列只是簡單的接收

**第二種：子傳父：主要通過$emit 來實現**

具體實現：子元件通過通過繫結事件觸發函式，在其中設定

this.$emit(‘要派發的自定義事件’，要傳遞的值)，$emit 中有兩個引數一

是要派發的自定義事件，第二個引數是要傳遞的值
 

**第三種：兄弟之間傳值有兩種方法：**

方法一：通過 event bus 實現

具體實現:建立一個空的 vue 並暴露出去，這個作為公共的 bus,即當

作兩個元件的橋樑，在兩個兄弟元件中分別引入剛才建立的 bus，在元件 A

中通過 bus.$emit（’自定義事件名’，要傳送的值）傳送資料，在元件 B

中通過 bus.$on（‘自定義事件名‘,function(v) { //v 即為要接收的值 }）接

收資料

方法二：通過 vuex 實現

具體實現：vuex 是一個狀態管理工具，主要解決大中型複雜專案的

資料共享問題，主要包括 state,actions,mutations,getters 和 modules 5 個要

素，主要流程：元件通過 dispatch 到 actions，actions 是非同步操作，再 actions

中通過 commit 到 mutations，mutations 再通過邏輯操作改變 state，從而

同步到元件，更新其資料狀態

7、mvvm的理解

**MVVM就是Model-View-ViewModel的縮寫，MVVM將檢視和業務邏輯分開。**

View：檢視層，Model資料模型，而ViewModel是把兩者建立通訊的橋樑。

在MVVM框架下，View和Model之間沒有直接的聯絡，而是通過ViewModel進行互動。
View和ViewModel之間以及Model和ViewModel之間的互動都是雙向的，
因此view資料的變化會同步到Model中，而Model資料的變化也會立即反映到View上。
可以說它們兩者是實時更新的，互相影響。 
 ViewModel通過雙向資料繫結把View層和Model層連線了起來，
 而View和Model之間的同步工作完全是自動的，
 因此開發者只需要關注業務邏輯，不需要手動操作DOM，也不需要關注資料狀態的同步問題，這些都由MVVM統一管理。

8、vue雙向資料繫結

使用v-model來實現

Vue 實現 雙向資料繫結主要採用：資料劫持結合“釋出-訂閱”模式的方式，通過Object.defineProperty（）的setter，getter，在資料變動時釋出訊息給訂閱者觸發監聽。

9、vuex

定義：Vuex是一個專為Vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

使用場景：需要構建一箇中大型單頁應用，您很可能會考慮如何更好的在元件外部管理狀態，Vuex將會成為自然而然的選擇。

優點：當你在state中定義了一個數據之後，可以在所在專案中的任何一個元件裡進行獲取、進行修改、並且你的修改可以得到全域性的響應變更。

Vuex的執行機制：在元件中通過this.$store.dispatch來呼叫actions中的方法，在action中通過commit來呼叫mutations中的方法，在mutations的方法中操作state中的資料，資料只要更新就會立即響應到元件上。

核心：

①state：定義初始資料。

②mutations：更改Vuex的store中的狀態的唯一方法是提交mutation

③getters：可以對state 進行計算操作，它就是 store 的計算屬性雖然在元件內也可以做計算屬性，但是 getters 可以在多給件之間複用如果一個狀態只在一個元件內使用，是可以不用 getters。

④actions：非同步操作初始資料，其實就是呼叫mutations裡面的方法。

⑤module：面對複雜的應用程式，當管理的狀態比較多時；我們需要將vuex的store物件分割成模組(modules)。

10、vue路由模式

在vue-router路由物件中，路由有兩種模式：hash和history，而預設的是hash模式.

hash路由原理：

通過onhashchange來檢測hash的變化，
然後通過location.hash來獲取到當前的hash值，
從而根據hash的變化來控制元素的顯示和隱藏

history路由原理

通過onpopstate來檢測瀏覽器歷史堆疊的變化，
然後通過history.pushState("路徑",null,"引數")向歷史堆疊中新增資訊

11、vue路由傳參

1、query 方式

query要用path引入=====>this.$route.query.name

query類似於ajax的get傳參==>瀏覽器位址列中顯示引數

傳參:

取值:

2、params 方式

params要用name引入=====>this.$route.params.name

params類似於post===>瀏覽器位址列中不顯示引數

傳參：

取值：

12、v-for 與 v-if 的優先順序

v-for比v-if優先，如果每一次都需要遍歷整個陣列，將會影響速度，尤其是當之需要渲染很小一部分的時候。

13、vue指令

⑴ v-bind：給元素繫結屬性

⑵ v-on：給元素繫結事件

⑶ v-html：給元素繫結資料，且該指令可以解析html標籤

⑷ v-text：給元素繫結資料，不解析標籤

⑸ v-model：資料雙向繫結

⑹ v-for：遍歷陣列

⑺ v-if：條件渲染指令，動態在DOM內新增或刪除DOM元素

⑻ v-else：條件渲染指令，必須跟v-if成對使用

⑼ v-else-if：判斷多層條件，必須跟v-if成對使用

⑽ v-cloak：解決插值閃爍問題

⑾ v-once：只渲染元素或元件一次

⑿ v-pre：跳過這個元素以及子元素的編譯過程，以此來加快整個專案的編譯速度

⒀ v-show：條件渲染指令，將不符合條件的資料隱藏(display:none)

14、Vue中key值的作用

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key 的作用主要是為了高效的更新虛擬DOM。

15、vue-router有哪幾種導航鉤子

① 全域性導航鉤子：一般用來判斷許可權，以及頁面丟失時需要執行的操作；

 beforeEach（）每次路由進入之前執行的函式。

 afterEach（）每次路由進入之後執行的函式。

 beforeResolve（）2.5新增

② 單個路由（例項鉤子）：某個指定路由跳轉時需要執行的邏輯。

 beforeEnter（）

 beforeLeave（）

③ 元件路由鉤子：

beforeRouteEnter（）

beforeRouteLeave（）

beforeRouteUpdate（）

16、v-show和v-if指令的共同點和不同點？

共同點：都能控制元素的顯示和隱藏；

不同點：實現本質方法不同，v-show本質就是通過控制css中的display設定為none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內新增或者刪除DOM元素，若初始值為false，就不會編譯了。而且v-if不停的銷燬和建立比較消耗效能。