1.說一下什么是mvvm模式

Model代表數據模型，數據和業務邏輯都在Model層中定義；View代表UI視圖，負責數據的展示；ViewModel負責監聽Model中數據的改變并且控制視圖的更新，處理用戶交互操作；

View 的變化會自動更新到 ViewModel ， ViewModel 的變化也會自動同步到 View 上顯示。這種自動同步是因為 ViewModel 中的屬性實現了 Observer ，當屬性變更時都能觸發對應的操作。

1. v-text v-html 區別?

1.v-text：會把標簽轉義輸出，不解析HTML標簽。即原模原樣輸出，h1標簽沒效果

2.v-html：會直接輸出結果，解析HTML標簽。即h1標簽會出效果

1. new Vue() 中的Vue是什么？其內部的this指向誰？

Vue?是一個構造函數，其內部的this指向實例化出來的對象，因此我們可以通過this調用data中的變量和?methods

中的方法。

l

1. Vue?常見的指令有哪些？

v-cloak 防止頁面加載閃爍

v-html 可以把html的內容填充到標簽中去

v-text 指令用于將數據填充到標簽中，作用于插值表達式類似

v-pre 顯示指令中原始信息，靜態的內容不需要編譯，可以加快渲染

v-once 執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】

v-on 用來進行事件的綁定

v-if ???判斷 是否創建或銷毀dom元素

v-else ??給 v-if 添加一個 "else" 塊，必須跟在 v-if之后

v-show ?是否顯示/隱藏dom元素

v-for ???循環

v-model ?數據雙向綁定

v-bind ???動態綁定屬性

1. v-cloak指令的作用？使用步驟？

防止頁面加載時出現閃爍問題。

1. 在出現閃爍的標簽中添加 v-cloak 指令
2. 利用屬性選擇器，選擇有v-cloak的標簽并設置樣式，如：[v-cloak]{ display:none}

1. v-if和v-show的區別？以及使用場景

v-if和v-show都是控制元素的顯示與隱藏,

不過v-if控制元素的顯示和隱藏的時候會創建或刪除對應的dom元素,當每一個顯示的時候,都會重新創建dom和渲染.

而v-show則是通過css的display來控制元素的顯示與隱藏.

v-if比較耗費性能,所以我們涉及到頻繁的顯示/隱藏操作建議使用v-show,如果不是頻繁操作的話,我們可以v-if

1. 什么是雙向數據綁定？

當數據發生變化的時候，視圖也就發生變化

當視圖發生變化的時候，數據也會跟著同步變化

1. Vue2中雙向數據綁定原理？

主要采用：數據劫持結合“發布-訂閱”模式的方式，通過Object.defineProperty（）的 set 和 get，在數據變動時發布消息給訂閱者觸發監聽。

1. Vue2 v-model?為什么稱為語法糖？

舉個例子：

<input v-model="str" />

// 等同于

<input :value="str" @input="str = $event.target.value" />

通過實例可以看出，明顯上面的寫法更簡單，所以我們稱v-model為語法糖。

1. 列舉出三個常見的表單修飾符？并說出作用。

.lazy 當輸入框失去焦點,再去同步輸入框中的數據

.number自動將用戶的輸入值轉為數值類型

.trim自動過濾用戶輸入的首尾空白字符

1. 說一下v-bind的作用？

v-bind ?主要用于屬性綁定，比方class屬性，style屬性，value屬性等等，只要是屬性，就可以用v-bind指令進行綁定。

其簡寫形式是” : ”

1. 動態綁定的用法

對象方法?v-bind:class="{'orange': true}"

數組方法v-bind:class="[class1, class2]"

行內?v-bind:style="{color: color, fontSize: fontSize+'px' }"

1. 說一些v-for能循環的數據類型有哪些，語法解構是什么？

v-for?可以循環字符串，數字，對象，數組。

語法解構：<標簽 v-for="（每項數據，索引）in 要循環的數據" :key="唯一標識">{{每項數據}}</標簽 >

1. 說一下key值的作用？

避免dom元素重復渲染. 我們一般在設置key的時候首先盡量會設置為id,或者index下標

1.在v-if中使用key

首先我們先看在vue中出現的一種情況，我們在vue中如果使用v-if進行切換時，此時Vue為了更加高效的渲染，此時會進行前后比較，如果切換前后都存在的元素，則直接復用

1.在v-for中使用key

對于用v-for渲染的列表數據來說，v-for默認使用就地復用的策略，列表數據修改的時候，他會根據key值去判斷某一個值是否修改，如果修改則重新渲染該項，否則復用之前的元素。在v-for中我們的key一般為id，也就是唯一的值，但是一般不要使用index作為key。

為什么不建議用index作為key?

使用index 作為 key和沒寫基本上沒區別，因為不管數組的順序怎么顛倒，index 都是 0, 1, 2...這樣排列，導致 Vue 會復用錯誤的舊子節點，做很多額外的工作。

1. 常見的事件修飾符有哪些？其作用是什么？

.stop 阻止事件冒泡

.once 只渲染一次

.self 事件只作用在元素本身

.capture?組件之間捕獲

.prevent 阻止元素的默認行為

.native 事件穿透,讓我們可以在自定義組件上定義事件和方法

1. 計算屬性有哪些優點？

.使用計算屬性可以讓模板更加的簡潔

.計算屬性是基于它們的響應式依賴進行緩存的

.computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是說多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化

1. Methods、 computed 、watch的區別?

1.methods是用來定義方法的區域，computed是計算屬性；watch是監聽，監聽data中的數據變化。

2.methods定義的方法需要調用才能觸發. 不具備緩存；computed支持緩存，只有當其依賴的屬性的值發生變化時，才會重新計算，否則使用緩存中的屬性值；watch不支持緩存，當對應屬性發生變化的時候，響應執行。

3.computed不支持異步，有異步操作時無法監聽數據變化；watch支持異步操作。computed第一次加載時就監聽；watch默認第一次加載時不監聽(immediate 組件創建時刻執行與否, ?immediate: true,第一次加載時監聽（默認為false）,deep 深度監聽 不推薦使用(非常的消耗性能))

4.computed中的函數必須調用return；watch不是。

??使用場景：

-methods：事件處理函數

- computed：一個屬性受到多個屬性影響，如：購物車商品結算。

- watch：一個數據影響多條數據，如：搜索數據。

- 數據變化響應，執行異步操作，或高性能消耗的操作，watch為最佳選擇

1. 寫出watch監聽對象，并且開啟第一次監聽的代碼？

watch: {

??????Obj: {

????????handler(val {

???????????console.log('obj.a changed');

????????},

????????immediate: true, // 開啟第一次監聽

????????deep:true // 開啟深度監聽

??????}

????}

1. 什么是過濾器？怎么定義全局過濾器和局部過濾器？

所謂的vue過濾器就是將數據進行二次處理,得到我們想要的結果數據

vue的過濾器分為兩種,第一種是全局過濾器,通過Vue.filter來進行定義,第二種是局部過濾器,需要定義在組件內部。項目中我們通過過濾器將后臺返回的狀態0 和1 轉化為支付或者未支付

1. Vue2自定義指令有哪些參數？

el: 指令所綁定的元素，可以用來直接操作DOM。

binding: 一個對象，包含指令的很多信息。

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

1. Vue2自定義指令有哪些鉤子函數？

(1)bind：只調用一次，指令第一次綁定到元素時調用

(2)inserted：被綁定元素插入父節點時調用

(3)update：所在組件的虛擬節點更新時調用

(4)componentUpdated：所在組件的虛擬節點及子虛擬節點全部更新后調用

(5)unbind：只調用一次，指令與元素解綁時調用

1. 解釋一下vue?中組件的概念？

封裝可重用的代碼，通常一個組件就是一個功能體，便于在多個地方都能夠調用這個功能體

特點：1.具有獨立功能的代碼片段

??2.方便維護，便于團隊作戰

1. Vue?中注冊組件，應該注意的事項有哪些？

1.data必須是函數,必須有返回值：return {}

2.組件模板必須是單個根元素

3.至少包含template

4.組件模板的內容可以是模板字符串

1. v-for與v-if的優先級那個高?如果同時使用v-for和v-if怎么解決?

v-for的優先級高. 因為v-for的時候我們才開始渲染dom元素,這個v-if還無法進行判斷.v-for和v-if不能同時使用,我們可以通過標簽,比如div或者template標簽來進行包裹,把v-if寫到包裹的標簽上面

1. Vue?腳手架安裝創建項目步驟？

搭建node環境根據操作系統選擇相應安裝包

檢驗是否安裝成功，命令行中直接輸入node -v，返回版本號

npm install @vue/cli -g

檢驗是否安裝成功，命令行中直接輸入vue -V，返回版本號

vue create 項目名稱

1. Vue?文件的組成部分？

template 結構（html代碼）

script行為

style樣式

1. Vue?常用的8個生命周期函數有哪些？

創建階段的四個：

beforeCreate：實例創建之前。?在此生命周期函數執行的時候，data 和 methods 中的數據都還沒有初始化。

created：實例創建之后。一般在這里發送http請求

beforeMount：組件掛載之前。

mounted：組件掛載之后。

運行階段的兩個：

beforeUpdate：數據改變，視圖更新之前。

updated：試圖更新之后。

銷毀階段的兩個：

beforeDestroy：實例銷毀之前。

destroyed：實例銷毀之后。

1. Vue?中父子組件創建執行順序是什么樣的？

> 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父mounted

1. Vue?中父子組件銷毀順序是什么樣的？

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父beforeDestroy→ 子beforeDestroy→ 子destroyed→ 父destroyed

1. 說一下你對?NextTick 的理解？

$nextTick也叫做異步更新隊列方法,而$nextTick方法的主要作用就是等待dom元素加載完畢之后才會執行的回調函數,我們經常會在$nextTick方法里面獲取dom元素

比如：beforeCreated獲取DOM元素、獲取最新的滾動列表

1. 父傳遞子如何傳遞

在子組件的標簽上定義屬性 子組件通過props來進行接受,可以通過數組的方式進行接受,也可以通過對象的方式來進行接收,如果父組件沒有傳遞屬性,子組件可以default來設置默認值

1. 子傳遞父如何傳遞

子組件通過this.$emit("自定義的事件",要傳給父組件的數據), 父組件通過子組件的標簽監聽自定義的事件,通過方法來接收傳遞的數據

1. 兄弟組件如何通信

通過中央事件總線,我們也稱之為eventBus,

?1.我們需要創建一個空的js文件,導出這個空的vue實例

?2.傳數據的時候使用this.$bus.$emit

?3.接數據的時候是在created中使用this.$bus.$on接收 第一個參數是事件名稱 第二個參數是一個回調函數包含了要接受的數據,

1. Props驗證類型都有哪些

number、boolean、string、object、array、function、date、symbol

1. Vue-Routervue路由有幾種模式?有什么區別?原理是什么?

vue的路由模式一共有兩種,分別是哈希和history.?

hash 就是指 url 尾巴后的#號以及后面的字符，history沒有帶#，外觀上比hash 模式好看些.

hash模式不會重新加載頁面,主要原理就是onhashchange()事件；而history模式,如果前端的url和后端發起請求的url不一致的話,會報404錯誤,所以使用history模塊的話我們需要和后端進行配合.

history api可以分為兩大部分，切換歷史狀態和修改歷史狀態：

修改歷史狀態：包括了 HTML5 中新增的 pushState() 和 replaceState() 方法，

切換歷史狀態： 包括forward()、back()、go()三個方法

1. vue中$router和$route區別

$router是VueRouter的一個實例對象，用于控制路由跳轉等；

$route是一個跳轉的路由對象，可以獲取當前的路由參數等

1. Params和query的區別

(1) ?query可以使用name和path，而params只能使用name

(2) ?使用params傳參刷新后不會保存，而query傳參刷新后可以保存

(3) ?Params在地址欄中不會顯示，query會顯示

(4) ?Params可以和動態路由一起使用，query不可以

1. 為什么vue中data必須是?個函數?

如果data是一個函數的話，這樣每復用一次組件，就會返回一份新的data，類似于給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結果。所以說vue組件的data必須是函數。這都是因為js的特性帶來的，跟vue本身設計無關。

1. 怎么定義vue-router的動態路由？怎么獲取傳過來的值

使用動態路徑參數，以冒號開頭，如下：

{

?path: '/details/:id'

?name: 'Details'

?components: Details

}

訪問details目錄下的所有文件，如details/a，details/b等，都會映射到Details組件上。

當匹配到/details下的路由時，參數值會被設置到this.$route.params下，所以通過這個屬性可以獲取動態參數

this.$route.params.id

1. 說?下你對slot插槽的理解

首先呢,所謂的插槽就是一個占位符,將自定義組件的內容展示出來.我們知道自定義的組件里面如果寫內容的話,頁面是不會顯示出來的,如果我們想讓自定義組件里面的內容顯示出來,我們就需要使用slot的插槽.

●默認插槽：又名匿名插槽，當slot沒有指定name屬性值的時候一個默認顯示插槽，一個組件內只有一個匿名插槽。

●具名插槽：帶有具體名字的插槽，也就是帶有name屬性的slot，一個組件可以出現多個具名插槽。

●作用域插槽：默認插槽、具名插槽的一個變體，不同點是可以將子組件內部的數據傳遞給父組件，讓父組件根據子組件的傳遞過來的數據決定如何渲染該插槽。

1.js的數據類型以及區別

JavaScript共有八種數據類型

基本數據類型： Undefined、Null、Boolean、Number、String

引用數據類型：object,function,array

2.JS判斷數據類型的方法

typeof 只能檢查除null外的基本數據類型和function，其他引用類型和null會返回object

instanceof 不能檢查基本數據類型

construct 能檢查除null和undefined外的類型

Object.prototype.toString.call 能檢查所有類型

3.什么是原型對象，說說對它的理解

構造函數的內部的 prototype 屬性指向的對象，就是構造函數的原型對象。

原型對象包含了可以由該構造函數的所有實例共享的屬性和方法。當使用構造函數新建一個實例對象后，在這個對象的內部將包含一個指針，這個指針指向構造函數的原型對象，在 ES5 中這個指針被稱為對象的原型。

4.數組常用的操作方法（5個以上）

join() 將一個數組轉成字符串。返回一個字符串

reverse() 將數組中各元素顛倒順序

shift()刪除數組中第一個元素，返回刪除的那個值，并將長度減 1

pop()刪除數組中最后一個元素，返回刪除的那個值，并將長度減 1

unshift() 往數組前面添加一個或多個數組元素，長度會改變

push() 往數組結尾添加一個或多個數組元素，長度會改變

concat() 連接數組

slice() 切割數組，返回數組的一部分

splice()插入、刪除或替換數組的元素

forEach()遍歷所有元素

every()判斷所有元素是否都符合條件

sort()對數組元素進行排序

map()對元素重新組裝，生成新數組

filter()過濾符合條件的元素

find() 查找 返回滿足提供的測試函數的第一個元素的值。否則返回 undefined。

some() 判斷是否有一個滿足條件 ，返回布爾值0

能影響原來數組的方法 splice() push() pop() shift() unshift() reverse() sort() ...

不會影響原來數組的方法

concat() slice() forEach() join() reduce() map() filter() slice() findIndex() ...

無返回值的：

forEach()

返回值為新數組的：

splice()、concat()、slice()、sort()、reverse()、map()、filter()

5.什么是遞歸函數

如果一個函數在內部調用自身本身，這個函數就是遞歸函數

其核心思想是把一個大型復雜的問題層層轉化為一個與原問題相似的規模較小的問題來求解

一般來說，遞歸需要有邊界條件、遞歸前進階段和遞歸返回階段。當邊界條件不滿足時，遞歸前進；當邊界條件滿足時，遞歸返回

優點：結構清晰、可讀性強

缺點：效率低、調用棧可能會溢出，其實每一次函數調用會在內存棧中分配空間，而每個進程的棧的容量是有限的，當調用的層次太多時，就會超出棧的容量，從而導致棧溢出。

6.cookie和localStorage、sessionStorage的區別

cookie：一般不超過4K，一般由服務器生成，可以設置失效時間；若沒有設置時間，關閉瀏覽器cookie失效，若設置了時間，cookie就會存放在硬盤里，過期才失效

localStorage：5M或者更大，永久有效，窗口或者瀏覽器關閉也會一直保存，除非手動永久清除，因此用作持久數據

sessionStorage：5M或者更大，僅在當前瀏覽器窗口關閉之前有效，關閉頁面或者瀏覽器會被清除

7.vue中data發?變化,視圖不更新如何解決

因為Vue實例中的數據是響應式的，而我們新增的屬性并不是響應式的，所以有時無法實時的更新到視圖上。一般是通過this.$set方法解決. this.$set方法一共有三個參數,分別是目前對象,新增屬性,新增的值

8.怎樣理解 Vue 的單向數據流

數據一般從父組件傳到子組件，子組件沒有權利直接修改父組件傳來的數據，即子組件從 props 中直接獲取的數據，只能請求父組件修改數據再傳給子組件。

9.vue路由守衛?

所謂的路由守衛就是當我們進行頁面跳轉的時候會觸發的鉤子函數。在項目中我們經常使用全局前置路由守衛實現頁面的鑒權。

全局路由守衛：beforeEach 前置守衛，beforeResolve 解析守衛，afterEach 后置守衛 ，

組件內路由守衛：beforeRouteEnter 進入之前，beforeRouteUpdate 更新之前，beforeRouteLeave 離開之前，

路由獨享守衛：beforEnter 進入之前

這些回調函數里面會有三個參數,分別是`to,from,next`,分別對應的是要進入的路由、離開之前的路由,以及進入寫一個路由。

10.簡述Object.defineProperty??

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性。

Object.defineproperty方法需要傳遞3個參數：需要定義屬性的當前對象、當前需要定義的屬性名、描述符 一般是一個對象

Vue2 通過 Object.defineProperty() 來劫持數據變化，實現數據的雙向綁定。

11.計算屬性的get和set方法

set：設置值時觸發。

get：獲取值時觸發。

12.簡述單頁面應用和多頁面應用

單頁面：只有一個html頁面，跳轉方式是組件之間的切換

優點：跳轉流暢、組件化開發、組件可復用、開發便捷

缺點：首屏加載過慢

多頁面：有多個頁面，跳轉方式是頁面之間的跳轉

優點：首屏加載塊

缺點：跳轉速度慢

13.簡述keep-alive

keep-alive是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。

包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們，它自身不會渲染一個DOM元素，也不會出現在父組件中

使用方式：包裹在需要緩存的組件外

14.簡述vue的內置組件

component ?????????動態組件

transition ????????動畫

transition-group ??動畫

keep-alive ??????緩存

slot ??????????????插槽

15.列表跳詳情頁面的思路?（跳轉/傳參數/接受）

(1)在列表頁中給某個元素一個點擊事件，并傳遞一個值，在methods的方法中寫跳轉（this.$router.push({name:”xiang”,params:{zhi:值}})）

(2)在詳情頁?data獲取傳遞過來的值（this.$route.params.值）

16.虛擬 DOM 原理

虛擬dom 是根據模板生成一個js對象（使用createElement方法），根據這個js對象再去生成真實的dom，對復雜的文檔DOM結構，提供一種方便的工具，進行最小化DOM操作

17. Vue2.0 響應式數據的原理（同理論8）

主要采用：數據劫持結合“發布-訂閱”模式的方式，通過Object.defineProperty（）的 set 和 get，在數據變動時發布消息給訂閱者觸發監聽。

18.vue中data發生變化,視圖不更新如何解決(同面試7)?

因為Vue實例中的數據是響應式的，而我們新增的屬性并不是響應式的，所以有時無法實時的更新到視圖上。一般是通過this.$set方法解決. this.$set方法一共有三個參數,分別是目前對象,新增屬性,新增的值

19.請說出 vue.cli 項目中 src 目錄每個文件夾和文件的用法

src

assets 靜態資源文件 圖片、圖標、樣式等

components 公共組件

router 路由配置

store vuex配置

views 視圖，路由對應的組件

App.vue 所有vue文件的公共

main.js 程序主入口，全局配置

Vue.config.js 項目配置，跨域、分包等

1. Vue.js 的特點

Vue.js 是一個優秀的前端界面開發 JavaScript 庫。

1) 輕量級的框架

Vue.js 能夠自動追蹤依賴的模板表達式和計算屬性，提供 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API，使讀者更加容易理解，能夠更快上手。

2) 雙向數據綁定

聲明式渲染是數據雙向綁定的主要體現，同樣也是 Vue.js 的核心，它允許采用簡潔的模板語法將數據聲明式渲染整合進 DOM。

3) 指令

Vue.js 與頁面進行交互，主要就是通過內置指令來完成的，指令的作用是當其表達式的值改變時相應地將某些行為應用到 DOM 上。

4) 組件化

組件（Component）是 Vue.js 最強大的功能之一。在 Vue 中，父子組件通過 props 傳遞通信，從父向子單向傳遞。子組件與父組件通信，通過觸發事件通知父組件改變數據。這樣就形成了一個基本的父子通信模式。

5) 客戶端路由

Vue-router 是 Vue.js 官方的路由插件，與 Vue.js 深度集成，用于構建單頁面應用。Vue 單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來，傳統的頁面是通過超鏈接實現頁面的切換和跳轉的。

6) 狀態管理

狀態管理實際就是一個單向的數據流，State 驅動 View 的渲染，而用戶對 View 進行操作產生 Action，使 State 產生變化，從而使 View 重新渲染，形成一個單獨的組件。