前言：7月份的第一天，記一下
1.vue優點？
答：輕量級框架：只關注視圖層，是一個構建數據的視圖集合，大小隻有幾十kb；
簡單易學：國人開發，中文文檔，不存在語言障礙 ，易於理解和學習；
雙向數據綁定：保留了angular的特點，在數據操作方面更爲簡單；
組件化：保留了react的優點，實現了html的封裝和重用，在構建單頁面應用方面有着獨特的優勢；
視圖，數據，結構分離：使數據的更改更爲簡單，不需要進行邏輯代碼的修改，只需要操作數據就能完成相關操作；
虛擬DOM：dom操作是非常耗費性能的， 不再使用原生的dom操作節點，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；
運行速度更快:相比較與react而言，同樣是操作虛擬dom，就性能而言，vue存在很大的優勢。
2.vue父組件向子組件傳遞數據？
答：通過props
3.子組件像父組件傳遞事件？
答：$emit方法
4.v-show和v-if指令的共同點和不同點？
答: 共同點：都能控制元素的顯示和隱藏；
不同點：實現本質方法不同，v-show本質就是通過控制css中的display設置爲none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內添加或者刪除DOM元素，若初始值爲false，就不會編譯了。而且v-if不停的銷燬和創建比較消耗性能。
總結：如果要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用v-if（初始渲染開銷較小，切換開銷比較大）。
5.如何讓CSS只在當前組件中起作用？
答：在組件中的style前面加上scoped
6.<keep-alive></keep-alive>的作用是什麼?
答:keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
7.如何獲取dom?
答：ref="domName" 用法：this.$refs.domName
8.說出幾種vue當中的指令和它的用法？
答：v-model雙向數據綁定；
v-for循環；
v-if v-show 顯示與隱藏；
v-on事件；v-once: 只綁定一次。
9. vue-loader是什麼？使用它的用途有哪些？
答：vue文件的一個加載器，將template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
10.爲什麼使用key?
答：需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點。
作用主要是爲了高效的更新虛擬DOM。
11.axios及安裝?
答：請求後臺資源的模塊。npm install axios --save裝好，
js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中。
12.v-modal的使用。
答：v-model用於表單數據的雙向綁定，其實它就是一個語法糖，這個背後就做了兩個操作：
v-bind綁定一個value屬性；
v-on指令給當前元素綁定input事件。
13.請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置; app.vue是一個應用主組件；main.js是入口文件。
14.分別簡述computed和watch的使用場景
答：computed:
當一個屬性受多個屬性影響的時候就需要用到computed
最典型的栗子：購物車商品結算的時候
watch:
當一條數據影響多條數據的時候就需要用watch
栗子：搜索數據
15.v-on可以監聽多個方法嗎？
答：可以，栗子：
<input type="text"v-on="{input:onInput,focus:onFocus,blur:onBlur}"></input>
16.$nextTick的使用
答：當你修改了data的值然後馬上獲取這個dom元素的值，是不能獲取到更新後的值，
你需要使用$nextTick這個回調，讓修改後的data值渲染更新到dom元素之後在獲取，才能成功。
17.vue組件中data爲什麼必須是一個函數？
答：因爲JavaScript的特性所導致，在component中，data必須以函數的形式存在，不可以是對象。
組建中的data寫成一個函數，數據以函數返回值的形式定義，這樣每次複用組件的時候，都會返回一份新的data，相當於每個組件實例都有自己私有的數據空間，它們只負責各自維護的數據，不會造成混亂。而單純的寫成對象形式，就是所有的組件實例共用了一個data，這樣改一個全都改了。
18.漸進式框架的理解
答：主張最少；可以根據不同的需求選擇不同的層級；
19.Vue中雙向數據綁定是如何實現的？
答：vue 雙向數據綁定是通過 數據劫持 結合 發佈訂閱模式的方式來實現的， 也就是說數據和視圖同步，數據發生變化，視圖跟着變化，視圖變化，數據也隨之發生改變；
核心：關於VUE雙向數據綁定，其核心是 Object.defineProperty()方法。
20.單頁面應用和多頁面應用區別及優缺點
答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然後在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用於pc端。
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新
單頁面的優點：
用戶體驗好，快，內容的改變不需要重新加載整個頁面，基於這一點spa對服務器壓力較小；前後端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。
單頁面缺點：
不利於seo；導航不可用，如果一定要導航需要自行實現前進、後退。（由於是單頁面不能用瀏覽器的前進後退功能，所以需要自己建立堆棧管理）；初次加載時耗時多；頁面複雜度提高很多。
21.v-if和v-for的優先級
答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級，這意味着 v-if 將分別重複運行於每個 v-for 循環中。所以，不推薦v-if和v-for同時使用。
如果v-if和v-for一起用的話，vue中的的會自動提示v-if應該放到外層去。
22.assets和static的區別
答：相同點：assets和static兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點
不相同點：assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解爲壓縮體積，代碼格式化。而壓縮後的靜態資源文件最終也都會放置在static文件中跟着index.html一同上傳至服務器。static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。因爲避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資源文件由於沒有進行壓縮等操作，所以文件的體積也就相對於assets中打包後的文件提交較大點。在服務器中就會佔據更大的空間。
建議：將項目中template需要的樣式文件js文件等都可以放置在assets中，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因爲這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。
23.vue常用的修飾符
答：.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行爲（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內；
.self：只會觸發自己範圍內的事件，不包含子元素；
.once：只會觸發一次。
24.vue的兩個核心點
答：數據驅動、組件系統
數據驅動：ViewModel，保證數據和視圖的一致性。
組件系統：應用類UI可以看作全部是由組件樹構成的。
25.vue和jQuery的區別
答：jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM對象，而數據和界面是在一起的。比如需要獲取label標籤的內容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。
26. 引進組件的步驟
答: 在template中引入組件；
在script的第一行用import引入路徑；
用component中寫上組件名稱。
vue中引入組件的方法：
1.採用ES6的import ... from ...語法
或
CommonJS的require()方法引入組件
2.對組件進行註冊,代碼如下
註冊
Vue.component('my-component',{template: '<div>A custom component!</div>'})
3.使用組件
<my-component></my-component>
27.delete和Vue.delete刪除數組的區別
答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數組 改變了數組的鍵值。
28.SPA首屏加載慢如何解決
答：安裝動態懶加載所需插件；使用CDN資源。
29.Vue-router跳轉和location.href有什麼區別
答：使用location.href='/url'來跳轉，簡單方便，但是刷新了頁面；
使用history.pushState('/url')，無刷新頁面，靜態跳轉；
引進router，然後使用router.push('/url')來跳轉，使用了diff算法，實現了按需加載，減少了dom的消耗。
其實使用router跳轉和使用history.pushState()沒什麼差別的，因爲vue-router就是用了history.pushState()，尤其是在history模式下。
30. vue slot
答：簡單來說，假如父組件需要在子組件內放一些DOM，那麼這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。
31.你們vue項目是打包了一個js文件，一個css文件，還是有多個文件？
答：根據vue-cli腳手架規範，一個js文件，一個CSS文件。
32.Vue裏面router-link在電腦上有用，在安卓上沒反應怎麼解決？
答：Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。
33.Vue2中註冊在router-link上事件無效解決方法
答：使用@click.native。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。
34.RouterLink在IE和Firefox中不起作用（路由不跳轉）的問題
答: 方法一：只用a標籤，不適用button標籤；方法二：使用button標籤和Router.navigate方法
35.axios的特點有哪些
答：從瀏覽器中創建XMLHttpRequests；
node.js創建http請求；
支持Promise API；
攔截請求和響應；
轉換請求數據和響應數據；
取消請求；
自動換成json。
axios中的發送字段的參數是data跟params兩個，兩者的區別在於params是跟請求地址一起發送的，data的作爲一個請求體進行發送
params一般適用於get請求，data一般適用於post put 請求。
36.請說下封裝 vue 組件的過程？
答：1. 建立組件的模板，先把架子搭起來，寫寫樣式，考慮好組件的基本邏輯。(os：思考1小時，碼碼10分鐘，程序猿的準則。)
2. 準備好組件的數據輸入。即分析好邏輯，定好 props 裏面的數據、類型。
3. 準備好組件的數據輸出。即根據組件邏輯，做好要暴露出來的方法。
4. 封裝完畢了，直接調用即可
37.params和query的區別
答：用法：query要用path來引入，params要用name來引入，接收參數都是類似的，分別是this.$route.query.name和this.$route.params.name。
url地址顯示：query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示
注意點：query刷新不會丟失query裏面的數據
params刷新 會 丟失 params裏面的數據。
38.vue初始化頁面閃動問題
答：使用vue開發時，在vue初始化之前，由於div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會容易出現花屏現象，看到類似於{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。
首先：在css里加上
[v-cloak] {display: none;}
如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"
39.vue更新數組時觸發視圖更新的方法
答:push()；pop()；shift()；unshift()；splice()；sort()；reverse()
40.vue常用的UI組件庫
答：Mint UI，element，VUX
41.vue修改打包後靜態資源路徑的修改
答：cli2版本：將 config/index.js 裏的 assetsPublicPath 的值改爲 './' 。
cli3版本：在根目錄
build: {...assetsPublicPath: './',...}
下新建vue.config.js 文件，然後加上以下內容：（如果已經有此文件就直接修改）
module.exports = {publicPath: '', // 相對於 HTML 頁面（目錄相同）}
42.axios與ajax的區別及優缺點
區別：axios是通過Promise實現對ajax技術的一種封裝，就像jquery對ajax的封裝一樣，簡單來說就是ajax技術實現了局部數據的刷新，axios實現了對ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結一句話就是axios是ajax，ajax不止axios
優缺點：
ajax：
1、本身是針對MVC編程，不符合前端MVVM的浪潮
2、基於原生XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案，jquery整個項目太大，單純使用ajax卻要引入整個jquery非常不合理（採取個性化打包方案又不能享受cdn服務）
3、ajax不支持瀏覽器的back按鈕
4、安全問題ajax暴露了與服務器交互的細節
5、對搜索引擎的支持比較弱
6、破壞程序的異常機制
7、不容易調試
axios：
1、從node.js創建http請求
2、支持Promise API
3、客戶端防止CSRF（網站惡意利用）
4、提供了一些併發請求的接口
43.如何給vue自定義組件添加點擊事件？
需要在@click後面加上.native,官方對於native的解釋爲：.native -——監聽組件根元素的原生事件
正確寫法：<my-button @click.native="alert1()" names="刪除" v-bind:item2="btdata"></my-button>
44. vue-cli 工程中常用的 npm 命令有哪些？
-
npm install：下載 node_modules 資源包的命令
-
npm run dev：啓動 vue-cli 開發環境的 npm 命令
-
npm run build：vue-cli 生成生產環境部署資源的 npm 命令
45. Vue 打包命令是什麼？Vue 打包後會生成哪些文件？
npm run build ：Vue 打包命令Vue 打包後會在當前工作目錄下生成一個 dist 文件夾，文件夾中會有 static 靜態文件以及 index.html 初始頁面。
46. Vue 如何優化首屏加載速度？
異步路由加載
不打包庫文件
關閉 sourcemap
開啓 gzip 壓縮
47.指令v-el的作用是什麼?
提供一個在頁面上已存在的 DOM 元素作爲 Vue 實例的掛載目標.可以是 CSS 選擇器，也可以是一個 HTMLElement 實例,
48.在Vue中使用插件的步驟
-
採用ES6的
import ... from ...語法
-
使用全局方法
Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
49、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：還是在同一個文件，配置一個module屬性
第四步：然後在組件的style標籤加上lang屬性 ，例如：lang=”scss”
有哪幾大特性:
1、可以用變量，例如（$變量名稱=值）；
2、可以用混合器，例如:
定義了字體的混合器
@mixin font-dpr($font-size){$font:$font-size/2;font-size: $font;[data-dpr="2"] & { font-size: $font+2px;}[data-dpr="3"] & { font-size: $font+4px;}}
使用方法如下
.div{@include font-dpr(24px);}
3、可以嵌套
50，mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？
答：基於vue的前端組件庫。
npm安裝，然後import樣式和js，vue.use（mintUi）全局引入。在單個組件局部引入：import {Toast} from ‘mint-ui’。
組件一：Toast(‘登錄成功’)；組件二：mint-header；組件三：mint-swiper
51.v-model是什麼？怎麼使用？vue中標籤怎麼綁定事件？
答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model層的data屬性。綁定事件：<input @click=doLog() />
52，axios是什麼？怎麼使用？描述使用它實現登錄功能的流程？
答：請求後臺資源的模塊。
npm install axios -S裝好，然後發送的是跨域，需在配置文件中config/index.js進行設置。後臺如果是Tp5則定義一個資源路由。js中使用import進來，然後.get或.post。返回在.then函數中如果成功，失敗則是在.catch函數中
53. axios+tp5進階中，調用axios.post(‘api/user’)是進行的什麼操作？axios.put(‘api/user/8′)呢？
答：跨域，添加用戶操作，更新操作。
54.請說下封裝 vue 組件的過程？
答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、複用性等問題。
然後，使用Vue.extend方法創建一個組件，然後使用Vue.component方法註冊組件。子組件需要數據，可以在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用emit方法。
55.hash路由和history路由實現原理說一下
location.hash的值實際就是URL中#後面的東西。
history實際採用了HTML5中提供的API來實現，主要有history.pushState()和history.replaceState()。
56.Vue中事件綁定的原理
Vue 的事件綁定分爲兩種一種是原生的事件綁定，還有一種是組件的事件綁定, 理解:
1.原生 dom 事件的綁定,採用的是 addEventListener 實現
2.組件綁定事件採用的是 $on 方法
56.Vue父子組件生命週期調用順序
加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount>子mounted->父mounted
子組件更新過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程
父beforeUpdate->父updated
銷燬過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
理解:
組件的調用順序都是先父後子,渲染完成的順序肯定是先子後父
組件的銷燬操作是先父後子，銷燬完成的順序是先子後父
57.vue創建組件的時候data中爲什麼會被return出一個對象？
可以保證組件的每一次調用都是創建一個新對象，組件之間不會產生影響；
58.vue中有哪些內置組件：
component slot transtion fliters
59。什麼是路由懶加載：
路由懶加載是通過異步的方式來加載對應的路由組件，提高頁面相應速度
60.ssr是什麼
服務端渲染
61.哪個生命週期 hook 最適合從 API 調用中獲取數據？
儘管這取決於組件的用途及，但是創建的生命週期 hook 內通常非常適合放置 API 調用。這時可以使用組件的數據和響應性功能，但是該組件尚未渲染。
62.. 什麼時候調用 “updated” 生命週期 hook ？
在更新響應性數據並重新渲染虛擬 DOM 之後，將調用更新的 hook。它可以用於執行與 DOM 相關的操作，但是（默認情況下）不能保證子組件會被渲染，儘管也可以通過在更新函數中使用 this.$nextTick 來確保。
63.在 Vue 實例中編寫生命週期 hook 或其他 option/propertie 時，爲什麼不使用箭頭函數？
箭頭函數自己沒有定義 this 上下文，而是綁定到其父函數的上下文中。當你在 Vue 程序中使用箭頭函數（=>）時，this 關鍵字病不會綁定到 Vue 實例，因此會引發錯誤。所以強烈建議改用標準函數聲明。
64.什麼時候使用keep-alive元素？
例如在創建時從 API 調用中引入數據的組件。你可能不希望每次動態切換這個組件進行渲染時都調用此 API。這時你可以將組件包含在 keep-alive 元素中。keep-alive 元素緩存該組件並從那裏獲取它，而不是每次都重新渲染它。
65. 什麼是異步組件？
當大型程序使用大量組件時，從服務器上同時加載所有組件可能是沒有意義的。在這種情況下，Vue 允許我們在需要時定義從服務器異步加載的組件。在聲明或註冊組件時，Vue 接受提供 Promise 的工廠函數。然後可以在調用該組件時對其進行“解析”。
通過僅加載基本組件並把異步組件的加載推遲到未來的調用時間，可以節省帶寬和程序加載時間。
66.綁定 class 的數組用法
對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
數組方法v-bind:class="[class1, class2]"
行內 v-bind:style="{color: color, fontSize: fontSize+'px' }"
67.計算屬性和 watch 的區別
區別來源於用法，只是需要動態值，那就用計算屬性；需要知道值的改變後執行業務邏輯，才用 watch
68.computed 是一個對象時，它有哪些選項？
computed 和 methods 有什麼區別？
computed 是否能依賴其它組件的數據？
watch 是一個對象時，它有哪些選項？
-
有get和set兩個選項
-
methods是一個方法，它可以接受參數，而computed不能，computed是可以緩存的，methods不會。
-
computed可以依賴其他computed，甚至是其他組件的data
-
watch 配置
handler
deep 是否深度
immeditate 是否立即執行
69.js數組主要有哪些方法？主要參數你瞭解嗎？
具體你可以查一下，常用的一般有如下：
1 、shift():刪除數組的第一個元素,返回刪除的值。這裏是0
2 、unshift(3,4):把參數加載數組的前面，返回數組的長度。現在list:中是3,4,0,1,2
3、pop():刪除數組的最後一個元素，返回刪除的值。這裏是2.
4、push(3):將參數加載到數組的最後，返回數組的長度，現在List中時：0,1,2,3
5、concat(3,4):把兩個數組拼接起來。
6、splice(start,deleteCount,val1,val2,...)：從start位置開始刪除deleteCount項，並從該位置起插入val1,val2,...
7、reverse：將數組反序
var a = [1,2,3,4,5]; var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]
8、sort(orderfunction)：按指定的參數對數組進行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
9、slice(start,end)：返回從原數組中指定開始下標到結束下標之間的項組成的新數組
var a = [1,2,3,4,5]; var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]
70.js迭代的方法
every() 、fliter()、forEach()、map()、some()
71，談談對vue 組件化的理解。
組件是可複用的 Vue 實例，準確講它們是VueComponent的實例，繼承自Vue。可以增加代碼的複用性、可維護性和可測試性。提高開發效率， 方便重複使用，簡化調試步驟，提升整個項目的可維護性，便於協同開發，是高內聚、低耦合代碼的實踐。
72，談談對Vue 路由的理解。
根據不同的url展示不同的頁面或者數據。
分類：路由分爲前端路由和後端路由。
前端路由：主要用於單頁面的開發，根據用戶請求的地址來渲染不同的頁面。前端路由不會經過後端，而是根據hash值的變化進行頁面數據的渲染，所以不會刷新，不跳轉。
原理：通過hashRouter（onhashchange）或者history路由（h5 historyAPI）進行頁面的切換。
後端路由：根據用戶請求的路徑返回不同的頁面或數據。
73，created 和 mounted 的區別
created:在模板渲染成html前調用,即通常初始化某些屬性值,然後再渲染成視圖。mounted:在模板渲染成html後調用,通常是初始化頁面完成後,再對html的dom節點進行一些需要的操作
74，created 和 mounted 分別什麼時候用？
created
在實例創建完成後被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，
屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
mounted
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，
當 mounted 被調用時 vm.$el 也在文檔內。
75，vue 和 angular 分別採用什麼技術實現雙向數據綁定？
原理：數據劫持： vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。
實現步驟：要實現mvvm的雙向綁定，就必須要實現以下幾點：實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者
實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
實現一個Watcher，作爲連接Observer和Compile的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
mvvm入口函數，整合以上三者
76.描述下 vue 從初始化頁面–修改數據–刷新頁面 UI 的過程？
當 Vue 進入初始化階段時，一方面 Vue 會遍歷 data 中的屬性，並用 Object.defineProperty 將它轉化成 getter/setter 的形式，實現數據劫持(暫不談 Vue3.0 的 Proxy)；另一方面，Vue 的指令編譯器 Compiler 對元素節點的各個指令進行解析，初始化視圖，並訂閱 Watcher 來更新試圖，此時 Watcher 會將自己添加到消息訂閱器 Dep 中，此時初始化完畢。
當數據發生變化時，觸發 Observer 中 setter 方法，立即調用 Dep.notify(),Dep 這個數組開始遍歷所有的訂閱者，並調用其 update 方法，Vue 內部再通過 diff 算法，patch 相應的更新完成對訂閱者視圖的改變。
77. Vue中watch、methods 和 計算屬性的區別是什麼？
1、computed和methods
共同點：computed能現實的methods也能實現；
不同點：computed是基於它的依賴進行緩存的。computed只有在它的相關依賴發生變化纔會重新計算求值。而只要它的相關依賴沒有發生變化，多次訪問會立即返回之前的計算結果，而不必再次執行計算。相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。也就是說當我們不希望有緩存，用方法來替代。
2、watch和computed
共同點：都是以Vue的依賴追蹤機制爲基礎的，都是希望在依賴數據發生改變的時候，被依賴的數據根據預先定義好的函數，發生“自動”的變化。、；
不同點：watch擅長處理的場景：一個數據影響多個數據；computed擅長處理的場景：一個數據受多個數據影響。雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。
78.vue中怎麼重置data
第一種，手動去給表單雙向綁定的對象賦值爲空
this.$options.data()調用它我們可以獲取到頁面data在剛初始化時的狀態那麼這樣我們就可以將data中的某個數據重置到初始狀態
如果我想把整個data都重置到初始化狀態呢？
Object.assign(this.$data, this.$options.data())那就用這個方法this.$data 獲取的是當前的data對象Object.assign則可以將一個對象賦值給另一個對象兩個參數，可以將參數2 賦值給 參數1
79.Vue組件中寫 name 選項有什麼作用？
當項目使用keep-alive時，可搭配組件name進行緩存過濾
DOM遞歸迭代時需要調用自身name
當你用vue-devtools調試工具裏顯示的組見名稱是由vue中組件name決定的
80. vuex 的 store 特性是什麼
vuex 就是一個倉庫，倉庫裏放了很多對象。其中 state 就是數據源存放地，對應於一般 vue 對象裏面的 data
-
state 裏面存放的數據是響應式的，vue 組件從 store 讀取數據，若是 store 中的數據發生改變，依賴這相數據的組件也會發生更新
-
它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性
81. Vuex 如何區分 state 是外部直接修改，還是通過 mutation 方法修改的？
Vuex中修改state的唯一渠道就是執行 commit(‘xx’, payload) 方法，其底層通過執行 this._withCommit(fn) 設置_committing標誌變量爲true，然後才能修改state，修改完畢還需要還原_committing變量。外部修改雖然能夠直接修改state，但是並沒有修改_committing標誌位，所以只要watch一下state，state change時判斷是否_committing值爲true，即可判斷修改的合法性。
82. 不用 vuex 會帶來什麼問題
-
可維護性會下降，想修改數據要維護三個地方；
-
可讀性會下降，因爲一個組件裏的數據，根本就看不出來是從哪來的；
-
增加耦合，大量的上傳派發，會讓耦合性大大增加，本來Vue用Component就是爲了減少耦合，現在這麼用，和組件化的初衷相背。
83. Class 與 Style 如何動態綁定？
Class 可以通過對象語法和數組語法進行動態綁定：
對象語法：
<div v-bind:class="{active:isActive,'text-danger':hasError}"></div>data: {isActive: true,hasError: false}
數組語法：
<div v-bind:class="[isActive?activeClass:'',errorClass]"></div>data: {activeClass:'active',errorClass: 'text-danger'}
Style 也可以通過對象語法和數組語法進行動態綁定
對象語法：
<div v-bind:style="{color:activeColor,fontSize:fontSize +'px'}"></div>data: {activeColor:'red',fontSize: 30}
數組語法：
<div v-bind:style="[styleColor, styleSize]"></div>data: {styleColor: { color: 'red' },styleSize:{ fontSize:'23px' }}
生命週期函數面試題
1.什麼是 vue 生命週期？有什麼作用？
答：每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程中也會運行一些叫做 生命週期鉤子 的函數，這給了用戶在不同階段添加自己的代碼的機會。（ps：生命週期鉤子就是生命週期函數）例如，如果要通過某些插件操作DOM節點，如想在頁面渲染完後彈出廣告窗， 那我們最早可在mounted 中進行。
2.第一次頁面加載會觸發哪幾個鉤子？
答：beforeCreate， created， beforeMount， mounted
3.簡述每個週期具體適合哪些場景
答：beforeCreate：在new一個vue實例後，只有一些默認的生命週期鉤子和默認事件，其他的東西都還沒創建。在beforeCreate生命週期執行的時候，data和methods中的數據都還沒有初始化。不能在這個階段使用data中的數據和methods中的方法
create：data 和 methods都已經被初始化好了，如果要調用 methods 中的方法，或者操作 data 中的數據，最早可以在這個階段中操作
beforeMount：執行到這個鉤子的時候，在內存中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的
mounted：執行到這個鉤子的時候，就表示Vue實例已經初始化完成了。此時組件脫離了創建階段，進入到了運行階段。如果我們想要通過插件操作頁面上的DOM節點，最早可以在和這個階段中進行
beforeUpdate：當執行這個鉤子時，頁面中的顯示的數據還是舊的，data中的數據是更新後的， 頁面還沒有和最新的數據保持同步
updated：頁面顯示的數據和data中的數據已經保持同步了，都是最新的
beforeDestory：Vue實例從運行階段進入到了銷燬階段，這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處於可用狀態。還沒有真正被銷燬
destroyed：這個時候上所有的 data 和 methods ， 指令， 過濾器 ……都是處於不可用狀態。組件已經被銷燬了。
4.created和mounted的區別
答：created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。
mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
5.vue獲取數據在哪個週期函數
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.
6.請詳細說下你對vue生命週期的理解？
答：總共分爲8個階段創建前/後，載入前/後，更新前/後，銷燬前/後。
創建前/後：在beforeCreated階段，vue實例的掛載元素$el和**數據對象**data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷燬前/後：在執行destroy方法後，對data的改變不會再觸發週期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在。
vue路由面試題
1.mvvm 框架是什麼？
答：vue是實現了雙向數據綁定的mvvm框架，當視圖改變更新模型層，當模型層改變更新視圖層。在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。
2.vue-router 是什麼?它有哪些組件
答：vue用來寫路由一個插件。router-link、router-view
3.active-class 是哪個組件的屬性？ 嵌套路由怎麼定義？children
答：vue-router模塊的router-link組件。children數組來定義子路由
4.怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值？
答：在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id。
5.vue-router 有哪幾種導航鉤子?
答：三種，
第一種：是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
第二種：組件內的鉤子
第三種：單獨路由獨享組件
6.$route 和 $router 的區別
答：$router是VueRouter的實例，在script標籤中想要導航到不同的URL,使用$router.push方法。返回上一個歷史history用$router.to(-1)
$route爲當前router跳轉對象。裏面可以獲取當前路由的name,path,query,parmas等。
7.vue-router的兩種模式
答:hash模式：即地址欄 URL 中的 # 符號；
history模式：window.history對象打印出來可以看到裏邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）。
8.vue-router實現路由懶加載（ 動態加載路由 ）
答:三種方式
第一種：vue異步組件技術 ==== 異步加載，vue-router配置路由 , 使用vue的異步組件技術 , 可以實現按需加載 .但是,這種情況下一個組件生成一個js文件。
第二種：路由懶加載(使用import)。
第三種：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需加載。這種情況下，多個路由指定相同的chunkName，會合並打包成一個js文件。
9.vue的路由使用步驟？
1.下載vue-router路由模塊；
2.創建路由對象；
3.配置路由規則；
4.將路由對象註冊爲vue實例對象的成員屬性；
vuex常見面試題
1.vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。
新建了一個目錄store.js，….. export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
2.vuex有哪幾種屬性？
答：有五種，分別是 State、 Getter、Mutation 、Action、 Module
state => 基本數據(數據源存放地)
getters => 從基本數據派生出來的數據
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以異步。
modules => 模塊化Vuex
vuex的State特性是？
stae就是存放數據的地方，類似一個倉庫 , 特性就是當mutation修改了state的數據的時候，他會動態的去修改所有的調用這個變量的所有組件裏面的值（ 若是store中的數據發生改變，依賴這個數據的組件也會發生更新 ）
vuex的Getter特性是？
getter用來獲取數據，mapgetter經常在計算屬性中被使用
vuex的Mutation特性是？
Action 類似於 mutation，不同在於：
-
Action 提交的是 mutation，而不是直接變更狀態。
-
Action 可以包含任意異步操作
3.Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？
答：如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state裏。
如果被其他地方複用，這個很大機率上是需要的，如果需要，請將請求放入action裏，方便複用