2022年前端Vue常见面试题大全（三万长文）持续更新...
目錄
1.Vue和React有什么不同？使用場(chǎng)景分別是什么？
2.axios是什么？怎么使用它，怎么解決跨域？
3.說說Vue，React，angularjs，jquery的區(qū)別
4.什么階段（生命周期）才能訪問操作dom？為什么
5.組件中的data為什么是個(gè)函數(shù)？
6.說一說scoped樣式隔離
7.v-if與v-show的區(qū)別？
8.什么是MVVM？
9.Vue修飾符有哪些？
10.函數(shù)式組件使用場(chǎng)景和原理
11.能說下 vue-router 中常用的路由模式實(shí)現(xiàn)原理嗎？
12.GET和POST的區(qū)別
14.跨域的方法
15.Vue組件通信有哪些方式
16.Vue的優(yōu)點(diǎn)是什么？
17.vue-loader是什么? ？使用它的用途有哪些？
18.你的接口請(qǐng)求一般放在哪個(gè)生命周期中？
19.說一下指令v-el的作用是什么？
20.說幾種如何實(shí)現(xiàn)vue首屏加載優(yōu)化的
21.請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？
22.$route和$router的區(qū)別
23.對(duì)于vue3.0特性你有什么了解嗎？
24.虛擬DOM的優(yōu)缺點(diǎn)
25.虛擬DOM實(shí)現(xiàn)原理
26.直接給一個(gè)數(shù)組項(xiàng)賦值，Vue能檢測(cè)到變化嗎？
27.簡(jiǎn)述原型與原型鏈，原型鏈的作用有哪些？
28.普通函數(shù)，箭頭函數(shù)的區(qū)別
29.怎樣理解Vue的單向數(shù)據(jù)流？
30.vue-router是什么？有哪些組件？
31.Vuex解決了什么問題？
32.什么時(shí)候用Vuex
33.Vuex中狀態(tài)存儲(chǔ)在那里？怎么改變它
34.Vue和JQuery的區(qū)別在哪？為什么放棄JQuery用Vue？
35.slot插槽
36.v-if和v-for為什么不建議一起使用？
37.vue初始化頁(yè)面閃動(dòng)問題 什么原因 怎么解決？
38.Vue的兩個(gè)核心點(diǎn)
39.什么是閉包，用途有哪些？
40.組件間的通訊
41.Promise的作用
42.map與set的區(qū)別
43.構(gòu)造函數(shù)與普通函數(shù)的區(qū)別
44.hash與history的區(qū)別
45.vue常用指令？
46.Vue父子組件的生命周期順序
47.vue-router路由的兩種模式
48.vue 中 keep-alive 組件的作用
49.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)
50.Vue.extend 作用和原理
51.異步同步
52.Vue.set 方法原理
53.不用Vuex會(huì)帶來什么問題？
54.對(duì)SSR有了解嗎，它主要解決什么問題？
55.SSR優(yōu)缺點(diǎn)？
56.Vuex 為什么要分模塊
57.Vuex 頁(yè)面刷新數(shù)據(jù)丟失怎么解決？
58.nextTick 使用場(chǎng)景和原理
59.頁(yè)面渲染為什么使用 key？
60.VNode 是什么？虛擬 DOM 是什么？
61.setup組合api的優(yōu)點(diǎn)
62.輔助函數(shù)的實(shí)現(xiàn)
63.Vuex響應(yīng)式
64.Vue項(xiàng)目性能優(yōu)化
65.vue-router 路由模式有幾種？
66.vue生命周期鉤子函數(shù)有哪些？
67.Vue. js有什么特點(diǎn)？
68.axios是什么？如何使用它？
69.?如何在 Vue. js中循環(huán)插入圖片？
70.如何解決數(shù)據(jù)層級(jí)結(jié)構(gòu)太深的問題
71.如何讓CSS只在當(dāng)前組件中起作用？
72.vue-router 是什么?它有哪些組件
73.在哪個(gè)生命周期內(nèi)調(diào)用異步請(qǐng)求？為什么？優(yōu)點(diǎn)？
74.computed 和 watch 的區(qū)別和運(yùn)用的場(chǎng)景？
75.Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？
76.v-model 的原理？
77.vuex有哪幾種屬性
78.vuex 的 getter 特性是什么
79.vue2.x中如何監(jiān)測(cè)數(shù)組變化
80.可以被vue攔截到的數(shù)組方法以及不能被攔截到的數(shù)組方法？
81.談?wù)剢雾?yè)面（SPA）的理解？
82.談?wù)勀銓?duì) Vue 生命周期的理解？
83.Class 與 Style 如何動(dòng)態(tài)綁定？
84.vue-router 路由鉤子函數(shù)是什么？
85.Vue3.0 和 2.0 的響應(yīng)式原理區(qū)別
86.axios和ajax的區(qū)別：
87.vue中解決跨域問題
88.vue的原理
89.watch、methods 和 computed 的區(qū)別?
90.webpack有哪些優(yōu)點(diǎn)？
91.Vue生命周期鉤子是如何實(shí)現(xiàn)的
92.Vue的雙向數(shù)據(jù)綁定原理是什么？
93.在webpack中，為什么要打包發(fā)布？
94.路由守衛(wèi)
95.SPA首屏加載速度慢的怎么解決？
96.Vue初始化過程中（new Vue(options)）都做了什么？
97.對(duì)MVVM的理解？
98.Vue數(shù)據(jù)雙向綁定原理
99.Vue的響應(yīng)式原理
100.Vue3.x響應(yīng)式數(shù)據(jù)原理
101.Vue3.0 里為什么要用 Proxy API替代 defineProperty API？
102.Proxy 與 Object.defineProperty 優(yōu)劣對(duì)比
103.vue中組件的data為什么是一個(gè)函數(shù)？而new Vue 實(shí)例里，data 可以直接是一個(gè)對(duì)象
104.vue中data的屬性可以和methods中方法同名嗎，為什么？
105.vue中created與mounted區(qū)別
106.Vue中computed與method的區(qū)別
107.虛擬DOM中key的作用
108.用index作為key可能會(huì)引發(fā)的問題
109.Vue中watch用法詳解
110.vue中對(duì)mixins的理解和使用
111.為什么vue采用異步渲染
112.Vue 的異步更新機(jī)制是如何實(shí)現(xiàn)的？
113.$nextTick的理解
114.vue的自定義指令
115.你有寫過自定義指令嗎？自定義指令的應(yīng)用場(chǎng)景有哪些？
116.vue為什么在 HTML 中監(jiān)聽事件？
117.Vue.set 改變數(shù)組和對(duì)象中的屬性
118.vm.$set(obj, key, val) 做了什么？
119.第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？
120.vue-router有幾種鉤子函數(shù)？
121.vue-router路由跳轉(zhuǎn)方式
122.Vuex是什么？怎么使用？
123.Vuex和單純的全局對(duì)象有什么區(qū)別？
124.為什么 Vuex 的 mutation 中不能做異步操作？
125.Vue項(xiàng)目前端開發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域問題
126.做過哪些Vue的性能優(yōu)化？
127.Vue中的插槽
128.v-for 為什么要加上 key
129.Vdom的理解（虛擬DOM）
130.vue 的缺點(diǎn)
131.vue 和 react 區(qū)別
132.slot插槽種類以及原理
133.template 模板引擎的渲染過程
134.Vue.use是做什么的，原理是什么
135.組件中寫 name 選項(xiàng)有哪些好處
136.data 里面數(shù)據(jù)量比較大如何優(yōu)化
137.子組件里面可以修改父組件的值嗎
138.生命周期鉤子是如何實(shí)現(xiàn)的
139.vue 是怎么檢測(cè)數(shù)組的變化的
140.vue 組件渲染和更新的過程
141.vue 為什么要使用異步組件
142.vue 如何快速定位那個(gè)組件出現(xiàn)性能問題的
143.v-html 會(huì)導(dǎo)致那些問題
144.v-el作用
145.說說vue的動(dòng)態(tài)組件
146.怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過來的值？
147.自定義指令
1.Vue和React有什么不同？使用場(chǎng)景分別是什么？
- vue是雙向綁定
- react沒有數(shù)據(jù)雙向綁定，react是單向數(shù)據(jù)流
使用場(chǎng)景：
react：期待構(gòu)建大型應(yīng)用程序，期待同時(shí)適用與web端和原生app的框架，期待最大的生態(tài)系統(tǒng)
vue：期待模板搭建應(yīng)用，期待簡(jiǎn)單和能用就行的東西，期待應(yīng)用盡可能的小和快
2.axios是什么？怎么使用它，怎么解決跨域？
是什么？
- Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。前端最流行的 ajax 請(qǐng)求庫(kù)，
- react/vue 官方都推薦使用 axios 發(fā) ajax 請(qǐng)求
特點(diǎn):
- 基于 promise 的異步 ajax 請(qǐng)求庫(kù)，支持promise所有的API
- 瀏覽器端/node 端都可以使用，瀏覽器中創(chuàng)建XMLHttpRequests
- 支持請(qǐng)求／響應(yīng)攔截器
- 支持請(qǐng)求取消
- 可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來的內(nèi)容自動(dòng)轉(zhuǎn)換成 JSON類型的數(shù)據(jù)
- 批量發(fā)送多個(gè)請(qǐng)求
- 安全性更高，客戶端支持防御 XSRF，就是讓你的每個(gè)請(qǐng)求都帶一個(gè)從cookie中拿到的key, 根據(jù)瀏覽器同源策略，假冒的網(wǎng)站是拿不到你cookie中得key的，這樣，后臺(tái)就可以輕松辨別出這個(gè)請(qǐng)求是否是用戶在假冒網(wǎng)站上的誤導(dǎo)輸入，從而采取正確的策略。
常用語(yǔ)法：
- axios(config): 通用/最本質(zhì)的發(fā)任意類型請(qǐng)求的方式
- axios(url[, config]): 可以只指定 url 發(fā) get 請(qǐng)求
- axios.request(config): 等同于 axios(config)
- axios.get(url[, config]): 發(fā) get 請(qǐng)求
- axios.delete(url[, config]): 發(fā) delete 請(qǐng)求
- axios.post(url[, data, config]): 發(fā) post 請(qǐng)求
- axios.put(url[, data, config]): 發(fā) put 請(qǐng)求
- axios.defaults.xxx: 請(qǐng)求的默認(rèn)全局配置
- axios.interceptors.request.use(): 添加請(qǐng)求攔截器
- axios.interceptors.response.use(): 添加響應(yīng)攔截器
- axios.create([config]): 創(chuàng)建一個(gè)新的 axios(它沒有下面的功能)
- axios.Cancel(): 用于創(chuàng)建取消請(qǐng)求的錯(cuò)誤對(duì)象
- axios.CancelToken(): 用于創(chuàng)建取消請(qǐng)求的 token 對(duì)象
- axios.isCancel(): 是否是一個(gè)取消請(qǐng)求的錯(cuò)誤
- axios.all(promises): 用于批量執(zhí)行多個(gè)異步請(qǐng)求
- axios.spread(): 用來指定接收所有成功數(shù)據(jù)的回調(diào)函數(shù)的方法
3.說說Vue，React，angularjs，jquery的區(qū)別
4.什么階段（生命周期）才能訪問操作dom？為什么
在鉤子函數(shù)mounted()中才能開始訪問操作dom，因?yàn)樵趍ounted()生命周期前，dom剛好渲染好，但還未掛載到頁(yè)面，如果在這之前進(jìn)行dom操作，將找不到dom節(jié)點(diǎn)
5.組件中的data為什么是個(gè)函數(shù)？
因?yàn)榻M件是用來復(fù)用的，因?yàn)閖s里對(duì)象是引用關(guān)系，如果data是對(duì)象形式，那么data的作用域是沒有隔離的，在多個(gè)子組件時(shí)，會(huì)被外部因素影響，如果data是一個(gè)函數(shù)，那么每個(gè)實(shí)例可以獨(dú)自擁有一份返回對(duì)象的拷貝，組件實(shí)例之間的data屬性值不會(huì)互相影響
6.說一說scoped樣式隔離
Vue在創(chuàng)建組件的時(shí)候，會(huì)給組件生成唯一的id值，當(dāng)style標(biāo)簽給scoped屬性時(shí)，會(huì)給組件的html節(jié)點(diǎn)都加上這個(gè)id值標(biāo)識(shí)，如data-v4d5aa038，然后樣式表會(huì)根據(jù)這id值標(biāo)識(shí)去匹配樣式，從而實(shí)現(xiàn)樣式隔離
7.v-if與v-show的區(qū)別？
相同點(diǎn)：
- v-show和v-if都能控制元素的顯示和隱藏。
不同點(diǎn)：
- 實(shí)現(xiàn)本質(zhì)方法不同:v-show本質(zhì)就是通過設(shè)置css中的display設(shè)置為none;控制隱藏v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素;
- v-show都會(huì)編譯，初始值為false，只是將display設(shè)為none，但它也編譯了;v-if初始值為false，就不會(huì)編譯了
總結(jié)：v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷毀和創(chuàng)建，如果要頻繁切換某節(jié)點(diǎn)時(shí)，故v-show性能更好一點(diǎn)。
8.什么是MVVM？
model-view-viewModel(MVVM)是一個(gè)軟件架構(gòu)設(shè)計(jì)模式，能夠?qū)崿F(xiàn)前端開發(fā)和后端業(yè)務(wù)邏輯的分離，其中model指數(shù)據(jù)模型，負(fù)責(zé)后端業(yè)務(wù)邏輯處理，view指視圖層，負(fù)責(zé)前端整個(gè)用戶界面的實(shí)現(xiàn)，viewModel則負(fù)責(zé)view層和model層的交互
9.Vue修飾符有哪些？
1.事件修飾符：
- stop 阻止事件繼續(xù)傳播
- .prevent阻止標(biāo)簽?zāi)J(rèn)行為
- .capture 使用事件捕獲模式，即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理
- .self 只當(dāng)在event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)
- .once 事件將只會(huì)觸發(fā)一次
- .passive 告訴瀏覽器你不想阻止事件的默認(rèn)行為
2.v-model的修飾符：
- .lazy通過這個(gè)修飾符，轉(zhuǎn)變?yōu)樵赾hange事件再同步
- .number 將自動(dòng)過濾用戶的輸入值轉(zhuǎn)化為數(shù)值類型
- .trim 自動(dòng)過濾用戶輸入的首位空格
3.鍵盤事件的修飾符：
- .enter 回車
- .tab?
- .delete 刪除或回退
- .esc
- .space 空格
- .up 上鍵
- .down 下鍵
- .left 左鍵
- .right 右鍵
4.系統(tǒng)修飾符：
- .ctrl
- .alt
- .shift
- .meta
5.鼠標(biāo)按鈕修飾符：
- .left
- .right
- .middle
10.函數(shù)式組件使用場(chǎng)景和原理
函數(shù)式組件與普通組件的區(qū)別：
- 函數(shù)式組件需要在聲明組件是指定 functional：true
- 不需要實(shí)例化，所以沒有this，this通過render函數(shù)的第二個(gè)參數(shù)context來代替
- 沒有聲明周期鉤子函數(shù)，不能使用計(jì)算屬性，watch
- 不能通過$emit對(duì)外暴露事件，調(diào)用事件只能通過context.listeners.click的方式調(diào)用外部傳入的事件
- 因?yàn)楹瘮?shù)式組件是沒有實(shí)例化的，所以在外部通過ref去引用組件時(shí)，實(shí)際引用的是HTMLElement
- 函數(shù)式組件的props可以不用顯示聲明，所以沒有在props里面聲明的屬性都會(huì)被自動(dòng)隱式解析為prop,而普通組件所有未聲明的屬性都解析到 $attrs里面，并自動(dòng)掛載到組件根元素上面(可以通過inheritAttrs屬性禁止)
?? ?復(fù)制代碼
優(yōu)點(diǎn)：
- 由于函數(shù)組件不需要實(shí)例化，無(wú)狀態(tài)，沒有生命周期，所以渲染性能要好于普通組件
- 函數(shù)式組件結(jié)構(gòu)比較簡(jiǎn)單，代碼結(jié)構(gòu)更清晰
使用場(chǎng)景：
11.能說下 vue-router 中常用的路由模式實(shí)現(xiàn)原理嗎？
hash模式：
history模式：
利于了HTM5 History lnterface中新增的pushState()和replaceState()方法，這兩個(gè)方法應(yīng)用與瀏覽器的歷史記錄棧，在當(dāng)前已有的back，forward，go的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能，這兩個(gè)方法有個(gè)共同的特點(diǎn)：當(dāng)調(diào)用他們修改瀏覽器歷史棧后，雖然URL改變了，但瀏覽器不會(huì)刷新頁(yè)面，這就為但也應(yīng)用前端路由“更新視圖但不重新請(qǐng)求頁(yè)面”提供了基礎(chǔ)
12.GET和POST的區(qū)別
13.cookie和seesion區(qū)別
14.跨域的方法
瀏覽器為了安全機(jī)制，采用同源策略，域名，協(xié)議，端口號(hào)一致的才可以進(jìn)行訪問;
15.Vue組件通信有哪些方式
1.父?jìng)髯?#xff1a;props
父組件通過 props 向下傳遞數(shù)據(jù)給子組件。注：組件中的數(shù)據(jù)共有三種形式：data、props、computed
2.父?jìng)髯訉O：provide 和 inject
父組件定義provide方法return需要分享給子孫組件的屬性，子孫組件使用 inject 選項(xiàng)來接收指定的我們想要添加在這個(gè)實(shí)例上的 屬性；
3.子傳父：通過事件形式
子組件通過 $emit()給父組件發(fā)送消息，父組件通過v-on綁定事件接收數(shù)據(jù)。
4.父子、兄弟、跨級(jí)：eventBus.js
這種方法通過一個(gè)空的 Vue 實(shí)例作為中央事件總線（事件中心）,用它來（e m i t ） 觸 發(fā) 事 件 和 （ emit）觸發(fā)事件和（emit）觸發(fā)事件和（on）監(jiān)聽事件，巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信。
5.通信插件：PubSub.js
6.vuex
vuex 是 vue 的狀態(tài)管理器，存儲(chǔ)的數(shù)據(jù)是響應(yīng)式的。只需要把共享的值放到vuex中，其他需要的組件直接獲取使用即可；
16.Vue的優(yōu)點(diǎn)是什么？
- 輕量級(jí)框架：只關(guān)注視圖層，是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十kb
- 簡(jiǎn)單易學(xué)：國(guó)人開發(fā)，中文文檔，不存在語(yǔ)言障礙，易于理解學(xué)習(xí)
- 雙向數(shù)據(jù)綁定：保留了angular的特點(diǎn)，在數(shù)據(jù)操作方面更為簡(jiǎn)單
- 組件化：保留了react的優(yōu)點(diǎn)，實(shí)現(xiàn)了html的封裝和重用，在構(gòu)建單頁(yè)面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì)
- 視圖，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡(jiǎn)單，不需要進(jìn)行邏輯代碼的修改，只需要操作數(shù)據(jù)就能完成相關(guān)操作
- 虛擬DOM：dom操作是非常耗費(fèi)性能的，不再使用原生dom操作節(jié)點(diǎn)，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式
- 運(yùn)行速度更快：相比較于react而言，同樣是操作虛擬dom，就性能而言，vue存在很大優(yōu)勢(shì)
17.vue-loader是什么? ？使用它的用途有哪些？
作用：解析和轉(zhuǎn)換.vue文件。提取出其中的邏輯代碼 script,樣式代碼style,以及HTML 模板template，再分別把他們交給對(duì)應(yīng)的loader去處理
用途：js可以寫es6，style樣式可以 scss或less，template可以加js
特性：
1、允許為 Vue 組件的每個(gè)部分使用其它的 webpack loader，例如在
css-loader：加載由vue-loader提取出的CSS代碼
vue-template-compiler：把vue-loader提取出的HTML模板編譯成可執(zhí)行的javascript代碼
18.你的接口請(qǐng)求一般放在哪個(gè)生命周期中？
接口請(qǐng)求一般放在mounted中，在html渲染后調(diào)用，但需要注意的是服務(wù)端渲染時(shí)不支持mounted，需要放到created中
19.說一下指令v-el的作用是什么？
提供一個(gè)在頁(yè)面上以存在的DOM元素作為Vue實(shí)例的掛載目標(biāo)，可以是CSS選擇器，也可以是一個(gè)HTMLElement實(shí)例
20.說幾種如何實(shí)現(xiàn)vue首屏加載優(yōu)化的
21.請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？
22.$route和$router的區(qū)別
router為VueRouter的實(shí)例，相當(dāng)于一個(gè)全局的路由器對(duì)象，里面含有很多屬性和子對(duì)象，例如history對(duì)象。。。經(jīng)常用的跳轉(zhuǎn)鏈接就可以用this.$router.push，和router-link跳轉(zhuǎn)一樣。
route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象。。可以從里面獲取name,path,params,query等
23.對(duì)于vue3.0特性你有什么了解嗎？
vue3.0的目標(biāo)是讓Vue核心變得更小，更快，更強(qiáng)大
24.虛擬DOM的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
缺點(diǎn)：
25.虛擬DOM實(shí)現(xiàn)原理
用JavaScript對(duì)象模擬真實(shí)DOM樹，對(duì)真實(shí)DOM進(jìn)行抽象
diff算法：比較兩棵虛擬樹的差異
pach算法：將兩個(gè)虛擬DOM對(duì)象的差異應(yīng)用到真實(shí)的DOM樹
26.直接給一個(gè)數(shù)組項(xiàng)賦值，Vue能檢測(cè)到變化嗎？
由于JavaScript的限制，Vue不能檢測(cè)到以下數(shù)組的變動(dòng)：
27.簡(jiǎn)述原型與原型鏈，原型鏈的作用有哪些？
每一個(gè)類都是一個(gè)顯示原型prototype
每一個(gè)類都有一個(gè)隱式原型__proto__
實(shí)例的_proto__等于類的顯示原型prototype
當(dāng)去查找一個(gè)實(shí)例的屬性或方法，先在自身查找，找不到則沿著__proto__向上查找
我們把原型__proto__與原型__proto__形成的鏈條關(guān)系叫做原型鏈
作用是：實(shí)現(xiàn)了JS的繼承，讓實(shí)列擁有了類的公用方法
28.普通函數(shù)，箭頭函數(shù)的區(qū)別
29.怎樣理解Vue的單向數(shù)據(jù)流？
數(shù)據(jù)總是從父組件傳到子組件，子組件沒有權(quán)利修改父組件傳過來的數(shù)據(jù)，只能請(qǐng)求父組件對(duì)原數(shù)據(jù)進(jìn)行修改
30.vue-router是什么？有哪些組件？
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌
<router-link>和<router-view>和<keep-alive>
31.Vuex解決了什么問題？
解決兩個(gè)問題
32.什么時(shí)候用Vuex
如果應(yīng)用夠簡(jiǎn)單，最好不要使用 Vuex，一個(gè)簡(jiǎn)單的 store 模式即可；
需要構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用時(shí)，使用Vuex能更好地在組件外部管理狀態(tài)
當(dāng)項(xiàng)目遇到多個(gè)組件依賴于同一狀態(tài)時(shí)，來自不同組件的行為需要變更同一狀態(tài)
33.Vuex中狀態(tài)存儲(chǔ)在那里？怎么改變它
存儲(chǔ)在state中，改變Vuex中的狀態(tài)的唯一途徑就是顯式地提交(commit)mutation
34.Vue和JQuery的區(qū)別在哪？為什么放棄JQuery用Vue？
35.slot插槽
slot插槽，可以理解為slot在組件模板中提前占據(jù)了位置，當(dāng)復(fù)用組件時(shí)，使用相關(guān)的slot標(biāo)簽時(shí)，標(biāo)簽里的內(nèi)容就會(huì)自動(dòng)替換組件模板中對(duì)應(yīng)slot標(biāo)簽的位置，作為承載分發(fā)內(nèi)容的出口
主要作用是：復(fù)用和擴(kuò)展組件，做一些定制化組件的處理
36.v-if和v-for為什么不建議一起使用？
vue2.x版本中，當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)；
vue3.x版本中，當(dāng) v-if 與 v-for 一起使用時(shí)，v-if 具有比 v-for 更高的優(yōu)先級(jí)。
官網(wǎng)明確指出：避免 v-if 和 v-for 一起使用，永遠(yuǎn)不要在一個(gè)元素上同時(shí)使用 v-if 和 v-for。
可以先對(duì)數(shù)據(jù)在計(jì)算數(shù)據(jù)中進(jìn)行過濾，然后再進(jìn)行遍歷渲染；
操作和實(shí)現(xiàn)起來都沒有什么問題，頁(yè)面也會(huì)正常展示。但是會(huì)帶來不必要的性能消耗；
37.vue初始化頁(yè)面閃動(dòng)問題 什么原因 怎么解決？
使用vue開發(fā)時(shí)，在vue初始化之前，由于div是不歸vue管的，所以我們寫的代碼在
還沒有解析的情況下會(huì)容易出現(xiàn)花屏現(xiàn)象，看到類似于{{message}}的字樣，雖然一般情
況下這個(gè)時(shí)間很短暫，但是會(huì)影響用戶的體驗(yàn)。
解決方法:在css里加上
38.Vue的兩個(gè)核心點(diǎn)
數(shù)據(jù)驅(qū)動(dòng)，組件系統(tǒng)
數(shù)據(jù)驅(qū)動(dòng)：ViewModel，保證數(shù)據(jù)和視圖的一致性
組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的
39.什么是閉包，用途有哪些？
定義在一個(gè)函數(shù)內(nèi)部的函數(shù)。其中一個(gè)內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時(shí)，就會(huì)形成閉包。
用途：1.模仿塊級(jí)作用域，2.存儲(chǔ)變量，3.封裝私有變量
40.組件間的通訊
1.props/$emit
父組件A通過props的方式向子組件B傳遞，B to A 通過在B組件中$emit，A組件中v-on的方式實(shí)現(xiàn)
2.$emit/$on
通過一個(gè)空的Vue實(shí)例作為中央事件總線，用它來觸發(fā)事件和監(jiān)聽事件，輕量地實(shí)現(xiàn)了任何組件間的通信
3.vuex
4.$attrs/$listeners
當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，可以通過 v-bind="$attrs" 傳入內(nèi)部組件
41.Promise的作用
Promise是一種常用的異步解決方案，解決回調(diào)地獄的問題。
42.map與set的區(qū)別
1.Set 是一種叫做集合的數(shù)據(jù)結(jié)構(gòu)，Map 是一種叫做字典的數(shù)據(jù)結(jié)構(gòu)。
2.set是以 [value]的形式儲(chǔ)存元素，字典 是以 [key：value] 的形式儲(chǔ)存
43.構(gòu)造函數(shù)與普通函數(shù)的區(qū)別
1.命名方式
????????構(gòu)造函數(shù)名稱通常首字母要大寫
????????普通函數(shù)名稱首字母要小寫, 使用駝峰命名方式。
2.this的指向問題
????????構(gòu)造函數(shù)的this會(huì)綁定到創(chuàng)建的對(duì)象實(shí)例上;
????????普通函數(shù)的this則屬于此函數(shù)的調(diào)用者;
3.調(diào)用方式的不同
????????構(gòu)造函數(shù)需要使用new運(yùn)算符調(diào)用, 如果構(gòu)造函數(shù)沒有參數(shù)可以省略小括號(hào), 比如new Object；
????????普通函數(shù)的調(diào)用不需要new 運(yùn)算符, 而且必須有小括號(hào)。比如: function(){};
44.hash與history的區(qū)別
直觀區(qū)別：hash模式url帶#號(hào)，history模式不帶#號(hào)。
如果后臺(tái)沒有做相應(yīng)配置,history頁(yè)面會(huì)在再次刷新的時(shí)候,報(bào)404錯(cuò)誤;
45.vue常用指令？
46.Vue父子組件的生命周期順序
加載渲染過程： ?父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子組件更新過程：父beforeUpdate->子beforeUpdate->子updated->父updated
父組件更新過程：父beforeUpdate->父updated
銷毀過程： ? ? ?父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
47.vue-router路由的兩種模式
vue-router中默認(rèn)使用的是hash模式
hash模式, 帶#。如：http://localhost:8080/#/pageA。改變hash，瀏覽器本身不會(huì)有任何請(qǐng)求服務(wù)器動(dòng)作的，但是頁(yè)面狀態(tài)和url已經(jīng)關(guān)聯(lián)起來了。
history模式，不帶#， 如：http://localhost:8080/ 正常的而路徑，并沒有#。基于HTML5的 pushState、replaceState實(shí)現(xiàn)
48.vue 中 keep-alive 組件的作用
< keep-alive >是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
< keep-alive > 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。
49.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)
相同點(diǎn): v-show 和 v-if 都能控制元素的顯示和隱藏。
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果
50.Vue.extend 作用和原理
官方解釋：Vue.extend 使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。
其實(shí)就是一個(gè)子類構(gòu)造器，是Vue組件的核心api。實(shí)現(xiàn)思路就是使用原型繼承的方法返回了 vue 的子類，并且利用 mergeOptions 把傳入組件
51.異步同步
同步：向服務(wù)器發(fā)送請(qǐng)求，必須等請(qǐng)求到內(nèi)容，才能刷新頁(yè)面，用戶才能看到新內(nèi)容
異步：向服務(wù)器發(fā)送請(qǐng)求，這時(shí)可以做其他事情，內(nèi)容請(qǐng)求到時(shí)，用戶不用刷新頁(yè)面，也可以看到新內(nèi)容
52.Vue.set 方法原理
1.在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上（給響應(yīng)式對(duì)象新增屬性）
2.直接更改數(shù)組下標(biāo)來修改數(shù)組的值。
53.不用Vuex會(huì)帶來什么問題？
可維護(hù)性會(huì)下降，想修改數(shù)據(jù)要維護(hù)三個(gè)地方；
可讀性會(huì)下降，因?yàn)橐粋€(gè)組件里的數(shù)據(jù)，根本就看不出來是從哪來的；
增加耦合，大量的上傳派發(fā)，會(huì)讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現(xiàn)在這么用，和組件化的初衷相背。
54.對(duì)SSR有了解嗎，它主要解決什么問題？
Server-Side Rendering 我們稱其為SSR，意為服務(wù)端渲染指由服務(wù)側(cè)完成頁(yè)面的 HTML 結(jié)構(gòu)拼接的頁(yè)面處理技術(shù)，發(fā)送到瀏覽器，然后為其綁定狀態(tài)與事件，成為完全可交互頁(yè)面的過程；
解決了以下兩個(gè)問題：
- seo：搜索引擎優(yōu)先爬取頁(yè)面HTML結(jié)構(gòu)，使用ssr時(shí)，服務(wù)端已經(jīng)生成了和業(yè)務(wù)想關(guān)聯(lián)的HTML，有利于seo
- 首屏呈現(xiàn)渲染：用戶無(wú)需等待頁(yè)面所有js加載完成就可以看到頁(yè)面視圖（壓力來到了服務(wù)器，所以需要權(quán)衡哪些用服務(wù)端渲染，哪些交給客戶端）
缺點(diǎn)
- 復(fù)雜度：整個(gè)項(xiàng)目的復(fù)雜度
- 性能會(huì)受到影響
- 服務(wù)器負(fù)載變大，相對(duì)于前后端分離務(wù)器只需要提供靜態(tài)資源來說，服務(wù)器負(fù)載更大，所以要慎重使用
55.SSR優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
????????SSR 有著更好的 SEO（搜索引擎優(yōu)化）、并且首屏加載速度更快。
缺點(diǎn)：
????????開發(fā)條件會(huì)受限制，服務(wù)器端渲染只支持 beforeCreate 和 created 兩個(gè)鉤子，當(dāng)我們需要一些外部擴(kuò)展庫(kù)時(shí)需要特殊處理，服務(wù)端渲染應(yīng)用程序也需要處于 Node.js 的運(yùn)行環(huán)境。
服務(wù)器會(huì)有更大的負(fù)載需求。
56.Vuex 為什么要分模塊
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能會(huì)變得相當(dāng)臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊
57.Vuex 頁(yè)面刷新數(shù)據(jù)丟失怎么解決？
需要做 vuex 數(shù)據(jù)持久化，一般使用本地儲(chǔ)存的方案來保存數(shù)據(jù)，可以自己設(shè)計(jì)存儲(chǔ)方案，也可以使用第三方插件。
推薦使用 vuex-persist 插件，它是為 Vuex 持久化儲(chǔ)存而生的一個(gè)插件。不需要你手動(dòng)存取 storage，而是直接將狀態(tài)保存至 cookie 或者 localStorage中。
58.nextTick 使用場(chǎng)景和原理
nextTick 中的回調(diào)是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行的延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。主要思路就是采用微任務(wù)優(yōu)先的方式調(diào)用異步方法去執(zhí)行 nextTick 包裝的方法。
59.頁(yè)面渲染為什么使用 key？
當(dāng)有相同標(biāo)簽名的元素切換時(shí)，為避免渲染問題，需要通過 key 特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們，否則 Vue 為了效率只會(huì)替換相同
60.VNode 是什么？虛擬 DOM 是什么？
Vue在頁(yè)面上渲染的節(jié)點(diǎn)，及其子節(jié)點(diǎn)稱為“虛擬節(jié)點(diǎn) (Virtual Node)”，簡(jiǎn)寫為“VNode”。“虛擬 DOM”是由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼。
61.setup組合api的優(yōu)點(diǎn)
?1.沒有this，降低組件的耦合性，使組件復(fù)用，開發(fā)修改團(tuán)隊(duì)合作更加方便
?2.寫更加直觀，接近原生js
?3.按需導(dǎo)入方式，節(jié)省資源
62.輔助函數(shù)的實(shí)現(xiàn)
根據(jù)傳遞過來的數(shù)組選項(xiàng)，循環(huán)遍歷生成對(duì)應(yīng) key-value ，然后返回一個(gè)對(duì)象
63.Vuex響應(yīng)式
Vuex的原理是通過 new Vue產(chǎn)生實(shí)例，達(dá)到響應(yīng)式數(shù)據(jù)變化的目的
state ：state作為data屬性 $state傳入，通過 new Vue 初始化后變成響應(yīng)式數(shù)據(jù)
getters：getters本質(zhì)上就是一個(gè)計(jì)算屬性computed，Vuex內(nèi)部會(huì)聲明一個(gè) computed 對(duì)象，
然后將 getters 遍歷成 key value 形式，添加到 computed 上，最后通過 new vue 處理
64.Vue項(xiàng)目性能優(yōu)化
組件的延遲加載，可以把頁(yè)面資源劃分為多份，用到的時(shí)候才會(huì)按需加載，這樣減少第一次加載的消耗。
65.vue-router 路由模式有幾種？
vue-router 有 3 種路由模式：hash、history、abstract
1.hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；
2.history : 依賴 HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式；
3.abstract : 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式.
66.vue生命周期鉤子函數(shù)有哪些？
67.Vue. js有什么特點(diǎn)？
1.簡(jiǎn)潔：頁(yè)面由HTML模板+JSON數(shù)據(jù)+ Vue. js實(shí)例化對(duì)象組成。
2.數(shù)據(jù)驅(qū)動(dòng)：自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式。
3.組件化：用可復(fù)用、解耦的組件來構(gòu)造頁(yè)面。
4.輕量：代碼量小，不依賴其他庫(kù)。
5.快速：精確而有效地批量實(shí)現(xiàn)DOM更新。
6.易獲取：可通過npm、 bower等多種方式安裝，很容易融入
68.axios是什么？如何使用它？
axios是在vue2.0中用來替換 vue-resource.js插件的一個(gè)模塊，是一個(gè)請(qǐng)求后臺(tái)的模。
(axios另一種解釋：易用、簡(jiǎn)潔且高效的http庫(kù)，支持node端和瀏覽器端，支持Promise，支持?jǐn)r截器等高級(jí)配置)
用 npm install axios安裝 axios。基于 EMAScript 6 的 EMAScript Module規(guī)范，通過 import關(guān)鍵字將 axios導(dǎo)入，并添加到 Vue. js類的原型中。
這樣每個(gè)組件（包括vue.js實(shí)例化對(duì)象）都將繼承該方法對(duì)象。它定義了get、post等方法，可以發(fā)送get或者post請(qǐng)求。
在then方法中注冊(cè)成功后的回調(diào)函數(shù)，通過箭頭函數(shù)的作用域特征，可以直接訪問組件實(shí)例化對(duì)象，存儲(chǔ)返回的數(shù)據(jù)。
69.?如何在 Vue. js中循環(huán)插入圖片？
對(duì)“src”屬性插值將導(dǎo)致404請(qǐng)求錯(cuò)誤。應(yīng)使用 v-bind:src格式代替。
70.如何解決數(shù)據(jù)層級(jí)結(jié)構(gòu)太深的問題
在開發(fā)業(yè)務(wù)時(shí)，經(jīng)常會(huì)岀現(xiàn)異步獲取數(shù)據(jù)的情況，有時(shí)數(shù)據(jù)層次比較深，如以下代碼: span 'v-text="a.b.c.d"></span>,?
可以使用vm.$set手動(dòng)定義一層數(shù)據(jù): vm.$set("demo"，a.b.c.d)
71.如何讓CSS只在當(dāng)前組件中起作用？
在組件中的style前面加上scoped
72.vue-router 是什么?它有哪些組件
vue用來寫路由一個(gè)插件。router-link、router-view
73.在哪個(gè)生命周期內(nèi)調(diào)用異步請(qǐng)求？為什么？優(yōu)點(diǎn)？
1.可以在鉤子函數(shù) created、beforeMount、mounted 中進(jìn)行調(diào)用，（推薦使用created 鉤子函數(shù)）
原因：此時(shí)data 已經(jīng)創(chuàng)建，可以將服務(wù)端返回的數(shù)據(jù)進(jìn)行賦值
2.created 鉤子函數(shù)中調(diào)用異步請(qǐng)求優(yōu)點(diǎn)：
能更快獲取到服務(wù)端數(shù)據(jù)，減少頁(yè)面 loading 時(shí)間；
3.ssr 不支持 beforeMount 、mounted 鉤子函數(shù)，所以放在 created 中有助于一致性；
74.computed 和 watch 的區(qū)別和運(yùn)用的場(chǎng)景？
區(qū)別：
1.computed： 是計(jì)算屬性，依賴其它屬性值，并且 computed 的值有緩存， 只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時(shí)才會(huì)重新計(jì)算 computed 的值； ? ? ? ? ? ? ? ? ? ??
2.watch： 更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ， 每當(dāng)監(jiān)聽的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作；
運(yùn)用場(chǎng)景：
1.當(dāng)我們需要進(jìn)行數(shù)值計(jì)算，并且依賴于其它數(shù)據(jù)時(shí)，應(yīng)該使用 computed， 因?yàn)榭梢岳?computed 的緩存特性，避免每次獲取值時(shí)，都要重新計(jì)算；
2.當(dāng)我們需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，應(yīng)該使用 watch， ?使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 ( 訪問一個(gè) API )，限制我們執(zhí)行該操作的頻率， 并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無(wú)法做到的。
75.Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？
1.加載渲染過程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
2.子組件更新過程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
3.父組件更新過程父 beforeUpdate -> 父 updated
4.銷毀過程父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
76.v-model 的原理？
v-model 本質(zhì)上不過是語(yǔ)法糖，v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件
77.vuex有哪幾種屬性
有五種,分別是State , Getter , Mutation , Action , Module (就是mapAction)
1. state：vuex的基本數(shù)據(jù)，用來存儲(chǔ)變量
2. geeter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性
3. mutation：提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。每個(gè)mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)，提交載荷作為第二個(gè)參數(shù)。
4. action：和mutation的功能大致相同，不同之處在于 ==》1. Action 提交的是 mutation，而不是直接變更狀態(tài)。 2. Action 可以包含任意異步操作。
5. modules：模塊化vuex，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
78.vuex 的 getter 特性是什么
getter 可以對(duì) state 進(jìn)行計(jì)算操作，它就是 store 的計(jì)算屬性
雖然在組件內(nèi)也可以做計(jì)算屬性，但是 getter 可以在多給件之間復(fù)用
如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用 getters
79.vue2.x中如何監(jiān)測(cè)數(shù)組變化
使用了函數(shù)劫持的方式，重寫了數(shù)組的方法，Vue將data中的數(shù)組進(jìn)行了原型鏈重寫，指向了自己定義的數(shù)組原型方法。
這樣當(dāng)調(diào)用數(shù)組api時(shí)，可以通知依賴更新。如果數(shù)組中包含著引用類型，會(huì)對(duì)數(shù)組中的引用類型再次遞歸遍歷進(jìn)行監(jiān)控。
這樣就實(shí)現(xiàn)了監(jiān)測(cè)數(shù)組變化。
80.可以被vue攔截到的數(shù)組方法以及不能被攔截到的數(shù)組方法？
會(huì)：push() pop() shift() unshift() splice() sort() reverse() ?會(huì)檢測(cè)變動(dòng) 進(jìn)行頁(yè)面更新
不會(huì)：filter() concat() slice() map() ?新數(shù)組替換舊數(shù)組 不會(huì)改變?cè)瓟?shù)組，頁(yè)面不更新?? ?不會(huì)被攔截
Vue.set / this.$set ?強(qiáng)制更新
81.談?wù)剢雾?yè)面（SPA）的理解？
- SPA（ single page application ）僅在 Web 頁(yè)面初始化時(shí)加載相應(yīng)的 HTML、JavaScript 和 CSS。
- 一旦頁(yè)面加載完成，SPA 不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或跳轉(zhuǎn)
- 而頁(yè)面的變化是利用路由機(jī)制實(shí)現(xiàn) HTML 內(nèi)容的變換，避免頁(yè)面的重新加載。
優(yōu)點(diǎn)：
- 用戶體驗(yàn)好，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染
- 減少了不必要的跳轉(zhuǎn)和重復(fù)渲染，這樣相對(duì)減輕了服務(wù)器的壓力
- 前后端職責(zé)分離，架構(gòu)清晰，前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理
缺點(diǎn)：
- 初次加載耗時(shí)多
- 不能使用瀏覽器的前進(jìn)后退功能，由于單頁(yè)應(yīng)用在一個(gè)頁(yè)面中顯示所有的內(nèi)容，所以，無(wú)法前進(jìn)后退
- 不利于搜索引擎檢索：由于所有的內(nèi)容都在一個(gè)頁(yè)面中動(dòng)態(tài)替換，所以在SEO上有著天然的弱勢(shì)
82.談?wù)勀銓?duì) Vue 生命周期的理解？
生命周期通俗說就是Vue實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。
beforecreate （初始化界面前）
created （初始化界面后）
beforemount （渲染界面前）
mounted （渲染界面后）
beforeUpdate （更新數(shù)據(jù)前）
updated （更新數(shù)據(jù)后）
beforedestory （卸載組件前）
destroyed （卸載組件后）
83.Class 與 Style 如何動(dòng)態(tài)綁定？
Style 也可以通過對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定
Class 可以通過對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定
84.vue-router 路由鉤子函數(shù)是什么？
鉤子函數(shù)種類有：
?全局的路由鉤子函數(shù)：beforeEach、afterEach（一般用于全局進(jìn)行權(quán)限跳轉(zhuǎn)）
單個(gè)的路由鉤子函數(shù)：beforeEnter、beforeLeave（路由內(nèi)部鉤子，一般在路由表里）
組件內(nèi)的路由鉤子函數(shù)：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate
beforeEach：每一次路由該變的之后頁(yè)面加載之前執(zhí)行，三個(gè)參數(shù)（to 將要進(jìn)入的路由對(duì)象、from 即將離開的路由對(duì)象、next 跳轉(zhuǎn)方法），next 必須調(diào)用
afterEach：每一次路由該變的之后頁(yè)面加載之后執(zhí)行；兩個(gè)參數(shù)（to 將要進(jìn)入的路由對(duì)象、from 即將離開的路由對(duì)象）
beforeEnter：進(jìn)入指定路由跳轉(zhuǎn)時(shí)需要執(zhí)行的邏輯
beforeLeave：離開指定路由跳轉(zhuǎn)時(shí)需要執(zhí)行的邏輯
beforeRouteEnter、beforeRouteLeave、 beforeRouteUpdate都是寫在組件里面，也有三個(gè)參數(shù)（to、from、next）
85.Vue3.0 和 2.0 的響應(yīng)式原理區(qū)別
Vue3.x 改用 Proxy 替代 Object.defineProperty。因?yàn)?Proxy 可以直接監(jiān)聽對(duì)象和數(shù)組的變化，
并且有多達(dá)13種攔截方法。?
86.axios和ajax的區(qū)別：
axios是通過promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝，就像jQuery實(shí)現(xiàn)ajax封裝一樣。
?簡(jiǎn)單來說： ajax技術(shù)實(shí)現(xiàn)了網(wǎng)頁(yè)的局部數(shù)據(jù)刷新，axios實(shí)現(xiàn)了對(duì)ajax的封裝。 axios是ajax ajax不止axios。
87.vue中解決跨域問題
方法1.后臺(tái)更改header
方法2.使用JQuery提供的jsonp?
方法3.使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）
88.vue的原理
?Vue的模式是m-v-vm模式，即（model-view-modelView），
?通過modelView作為中間層（即vm的實(shí)例），進(jìn)行雙向數(shù)據(jù)的綁定與變化。
89.watch、methods 和 computed 的區(qū)別?
1.watch 為了監(jiān)聽某個(gè)響應(yīng)數(shù)據(jù)的變化。computed 是自動(dòng)監(jiān)聽依賴值的變化，從而動(dòng)態(tài)返回內(nèi)容，主要目的是簡(jiǎn)化模板內(nèi)的復(fù)雜運(yùn)算。所以區(qū)別來源于用法，只是需要?jiǎng)討B(tài)值，那就用 computed ；需要知道值的改變后執(zhí)行業(yè)務(wù)邏輯，才用 watch。
2.methods是一個(gè)方法，它可以接受參數(shù)，而computed 不能，computed 是可以緩存的，methods 不會(huì)。computed 可以依賴其他 computed，甚至是其他組件的 data。
90.webpack有哪些優(yōu)點(diǎn)？
專注于處理模塊化的項(xiàng)目，能做到開箱即用，一步到位
可通過plugin擴(kuò)展，完整好用又不失靈活
使用場(chǎng)景不局限于web開發(fā)
社區(qū)龐大活躍，經(jīng)常引入緊跟時(shí)代發(fā)展的新特性，能為大多數(shù)場(chǎng)景找到已有的開源擴(kuò)展
良好的開發(fā)體驗(yàn)
91.Vue生命周期鉤子是如何實(shí)現(xiàn)的
1.Vue的生命周期鉤子就是回調(diào)函數(shù)而已，當(dāng)創(chuàng)建組件實(shí)例的過程中會(huì)調(diào)用對(duì)應(yīng)的鉤子方法。
2.內(nèi)部會(huì)對(duì)鉤子函數(shù)進(jìn)行處理，將鉤子函數(shù)維護(hù)成數(shù)組的形式
92.Vue的雙向數(shù)據(jù)綁定原理是什么？
vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
93.在webpack中，為什么要打包發(fā)布？
1.開發(fā)環(huán)境下，打包生成的文件存放于內(nèi)存中，無(wú)法獲取最終打包生成的文件
2.開發(fā)環(huán)境下，打包生成的文件不會(huì)進(jìn)行代碼壓縮和性能優(yōu)化
94.路由守衛(wèi)
全局守衛(wèi)：
1.beforEach 全局前置守衛(wèi)
2.afterEach 全局后置守衛(wèi)
3.beforeResolve 全局解析守衛(wèi)
獨(dú)享守衛(wèi)：
1.beforeEnter 單個(gè)路由守衛(wèi)
組件內(nèi)部守衛(wèi)：
1.beforeRouterEnter 無(wú)法獲取組件 this
2.beforeRouteUpdate 當(dāng)前路由改變，但組件被復(fù)用時(shí)調(diào)用；例：foo/1 => foo/2
3.beforeRouteLeave 離開后，禁止用戶在未保存修改前離開
95.SPA首屏加載速度慢的怎么解決？
首屏?xí)r間（First Contentful Paint），指的是瀏覽器從響應(yīng)用戶輸入網(wǎng)址地址，到首屏內(nèi)容渲染完成的時(shí)間，此時(shí)整個(gè)網(wǎng)頁(yè)不一定要全部渲染完成，但需要展示當(dāng)前視窗需要的內(nèi)容；
加載慢的原因：
- 網(wǎng)絡(luò)延時(shí)問題
- 資源文件體積是否過大
- 資源是否重復(fù)發(fā)送請(qǐng)求去加載了
- 加載腳本的時(shí)候，渲染內(nèi)容堵塞了
常見的幾種SPA首屏優(yōu)化方式
- 減小入口文件積
- 靜態(tài)資源本地緩存
- UI框架按需加載
- 圖片資源的壓縮
- 組件重復(fù)打包
- 開啟GZip壓縮
- 使用SSR
96.Vue初始化過程中（new Vue(options)）都做了什么？
- 處理組件配置項(xiàng)；初始化根組件時(shí)進(jìn)行了選項(xiàng)合并操作，將全局配置合并到根組件的局部配置上；初始化每個(gè)子組件時(shí)做了一些性能優(yōu)化，將組件配置對(duì)象上的一些深層次屬性放到 vm.$options 選項(xiàng)中，以提高代碼的執(zhí)行效率；
- 初始化組件實(shí)例的關(guān)系屬性，比如 p a r e n t 、 parent、parent、children、r o o t 、 root、root、refs 等
- 處理自定義事件
- 調(diào)用 beforeCreate 鉤子函數(shù)
- 初始化組件的 inject 配置項(xiàng)，得到 ret[key] = val 形式的配置對(duì)象，然后對(duì)該配置對(duì)象進(jìn)行響應(yīng)式處理，并代理每個(gè) key 到 vm 實(shí)例上
- 數(shù)據(jù)響應(yīng)式，處理 props、methods、data、computed、watch 等選項(xiàng)
- 解析組件配置項(xiàng)上的 provide 對(duì)象，將其掛載到 vm._provided 屬性上
- 調(diào)用 created 鉤子函數(shù)
- 如果發(fā)現(xiàn)配置項(xiàng)上有 el 選項(xiàng)，則自動(dòng)調(diào)用 $mount 方法，也就是說有了 el 選項(xiàng)，就不需要再手動(dòng)調(diào)用 $mount 方法，反之，沒提供 el 選項(xiàng)則必須調(diào)用 $mount
- 接下來則進(jìn)入掛載階段
97.對(duì)MVVM的理解？
- MVVM 由 Model、View、ViewModel 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來；ViewModel 是一個(gè)同步View 和 Model的對(duì)象。
- 在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
- ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM， 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理
98.Vue數(shù)據(jù)雙向綁定原理
實(shí)現(xiàn)mvvm的數(shù)據(jù)雙向綁定，是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來給各個(gè)屬性添加setter，getter并劫持監(jiān)聽，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。就必須要實(shí)現(xiàn)以下幾點(diǎn)：
1、實(shí)現(xiàn)一個(gè)數(shù)據(jù)監(jiān)聽器Observer，能夠?qū)?shù)據(jù)對(duì)象的所有屬性進(jìn)行監(jiān)聽，如有變動(dòng)可拿到最新值并通知訂閱者
2、實(shí)現(xiàn)一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)
3、實(shí)現(xiàn)一個(gè)Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個(gè)屬性變動(dòng)的通知，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)，從而更新視圖
99.Vue的響應(yīng)式原理
什么是響應(yīng)式，也即是說，數(shù)據(jù)發(fā)生改變的時(shí)候，視圖會(huì)重新渲染，匹配更新為最新的值。
Object.defineProperty 為對(duì)象中的每一個(gè)屬性，設(shè)置 get 和 set 方法，每個(gè)聲明的屬性，都會(huì)有一個(gè) 專屬的依賴收集器 subs，當(dāng)頁(yè)面使用到 某個(gè)屬性時(shí)，觸發(fā) ObjectdefineProperty - get函數(shù)，頁(yè)面的 watcher 就會(huì)被 放到 屬性的依賴收集器 subs 中，在 數(shù)據(jù)變化時(shí)，通知更新；
當(dāng)數(shù)據(jù)改變的時(shí)候，會(huì)觸發(fā)Object.defineProperty - set函數(shù)，數(shù)據(jù)會(huì)遍歷自己的 依賴收集器 subs，逐個(gè)通知 watcher，視圖開始更新；
100.Vue3.x響應(yīng)式數(shù)據(jù)原理
Vue3.x改用Proxy替代Object.defineProperty。
因?yàn)镻roxy可以直接監(jiān)聽對(duì)象和數(shù)組的變化，并且有多達(dá)13種攔截方法。并且作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化。
Proxy只會(huì)代理對(duì)象的第一層，Vue3是怎樣處理這個(gè)問題的呢？
判斷當(dāng)前Reflect.get的返回值是否為Object，如果是則再通過reactive方法做代理， 這樣就實(shí)現(xiàn)了深度觀測(cè)。
監(jiān)測(cè)數(shù)組的時(shí)候可能觸發(fā)多次get/set，那么如何防止觸發(fā)多次呢？我們可以判斷key是否為當(dāng)前被代理對(duì)象target自身屬性，也可以判斷舊值與新值是否相等，只有滿足以上兩個(gè)條件之一時(shí)，才有可能執(zhí)行trigger。
101.Vue3.0 里為什么要用 Proxy API替代 defineProperty API？
1.defineProperty API 的局限性最大原因是它只能針對(duì)單例屬性做監(jiān)聽。
Vue2.x中的響應(yīng)式實(shí)現(xiàn)正是基于defineProperty中的descriptor，對(duì) data 中的屬性做了遍歷 + 遞歸，為每個(gè)屬性設(shè)置了 getter、setter。這也就是為什么 Vue 只能對(duì) data 中預(yù)定義過的屬性做出響應(yīng)的原因。
2.Proxy API的監(jiān)聽是針對(duì)一個(gè)對(duì)象的，那么對(duì)這個(gè)對(duì)象的所有操作會(huì)進(jìn)入監(jiān)聽操作， 這就完全可以代理所有屬性，將會(huì)帶來很大的性能提升和更優(yōu)的代碼。
Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問進(jìn)行過濾和改寫。
3.響應(yīng)式是惰性的。
在 Vue.js 2.x 中，對(duì)于一個(gè)深層屬性嵌套的對(duì)象，要劫持它內(nèi)部深層次的變化，就需要遞歸遍歷這個(gè)對(duì)象，執(zhí)行 Object.defineProperty 把每一層對(duì)象數(shù)據(jù)都變成響應(yīng)式的，這無(wú)疑會(huì)有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能監(jiān)聽到對(duì)象內(nèi)部深層次的屬性變化，因此它的處理方式是在 getter 中去遞歸響應(yīng)式，這樣的好處是真正訪問到的內(nèi)部屬性才會(huì)變成響應(yīng)式，簡(jiǎn)單的可以說是按需實(shí)現(xiàn)響應(yīng)式，減少性能消耗。
102.Proxy 與 Object.defineProperty 優(yōu)劣對(duì)比
1.Proxy 可以直接監(jiān)聽對(duì)象而非屬性；
2.Proxy 可以直接監(jiān)聽數(shù)組的變化；
3.Proxy 有多達(dá) 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
4.Proxy 返回的是一個(gè)新對(duì)象,我們可以只操作新的對(duì)象達(dá)到目的,而 Object.defineProperty 只能遍歷對(duì)象屬性直接修改；
5.Proxy 作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化，也就是傳說中的新標(biāo)準(zhǔn)的性能紅利；
6.Object.defineProperty 的優(yōu)勢(shì)如下:
兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無(wú)法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個(gè)大版本( 3.0 )才能用 Proxy 重寫。
103.vue中組件的data為什么是一個(gè)函數(shù)？而new Vue 實(shí)例里，data 可以直接是一個(gè)對(duì)象
我們知道，Vue組件其實(shí)就是一個(gè)Vue實(shí)例。
JS中的實(shí)例是通過構(gòu)造函數(shù)來創(chuàng)建的，每個(gè)構(gòu)造函數(shù)可以new出很多個(gè)實(shí)例，那么每個(gè)實(shí)例都會(huì)繼承原型上的方法或?qū)傩浴?/p>
Vue的data數(shù)據(jù)其實(shí)是Vue原型上的屬性，數(shù)據(jù)存在于內(nèi)存當(dāng)中。Vue為了保證每個(gè)實(shí)例上的data數(shù)據(jù)的獨(dú)立性，規(guī)定了必須使用函數(shù)，而不是對(duì)象。
因?yàn)槭褂脤?duì)象的話，每個(gè)實(shí)例（組件）上使用的data數(shù)據(jù)是相互影響的，這當(dāng)然就不是我們想要的了。對(duì)象是對(duì)于內(nèi)存地址的引用，直接定義個(gè)對(duì)象的話組件之間都會(huì)使用這個(gè)對(duì)象，這樣會(huì)造成組件之間數(shù)據(jù)相互影響。
使用函數(shù)后，使用的是data()函數(shù)，data()函數(shù)中的this指向的是當(dāng)前實(shí)例本身，就不會(huì)相互影響了。
而 new Vue 的實(shí)例，是不會(huì)被復(fù)用的，因此不存在引用對(duì)象的問題。
104.vue中data的屬性可以和methods中方法同名嗎，為什么？
可以同名，methods的方法名會(huì)被data的屬性覆蓋；調(diào)試臺(tái)也會(huì)出現(xiàn)報(bào)錯(cuò)信息，但是不影響執(zhí)行；
原因：源碼定義的initState函數(shù)內(nèi)部執(zhí)行的順序：props>methods>data>computed>watch
105.vue中created與mounted區(qū)別
在created階段，實(shí)例已經(jīng)被初始化，但是還沒有掛載至el上，所以我們無(wú)法獲取到對(duì)應(yīng)的節(jié)點(diǎn)，但是此時(shí)我們是可以獲取到vue中data與methods中的數(shù)據(jù)的；
在mounted階段，vue的template成功掛載在$el中，此時(shí)一個(gè)完整的頁(yè)面已經(jīng)能夠顯示在瀏覽器中，所以在這個(gè)階段，可以調(diào)用節(jié)點(diǎn)了；
106.Vue中computed與method的區(qū)別
相同點(diǎn):
如果作為模板的數(shù)據(jù)顯示，二者能實(shí)現(xiàn)響應(yīng)的功能，唯一不同的是methods定義的方法需要執(zhí)行
不同點(diǎn)：
1.computed 會(huì)基于響應(yīng)數(shù)據(jù)緩存，methods不會(huì)緩存；
2.diff之前先看data里的數(shù)據(jù)是否發(fā)生變化，如果沒有變化computed的方法不會(huì)執(zhí)行，但methods里的方法會(huì)執(zhí)行
3.computed是屬性調(diào)用，而methods是函數(shù)調(diào)用
107.虛擬DOM中key的作用
簡(jiǎn)單的說：key是虛擬DOM對(duì)象的標(biāo)識(shí)，在更新顯示時(shí)key起著極其重要的作用。
復(fù)雜的說：當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生了變化時(shí)，react會(huì)根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】，隨后React進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的diff比較，比較規(guī)則如下：
舊虛擬DOM中找到了與新虛擬DOM相同的key
1.若虛擬DOM中的內(nèi)容沒有變，直接使用之前的真是DOM
2.若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM
舊虛擬DOM中未找到與新虛擬DOM相同的key
1.根據(jù)數(shù)據(jù)創(chuàng)建新的真實(shí)DOM，隨后渲染到頁(yè)面
108.用index作為key可能會(huì)引發(fā)的問題
- 若對(duì)數(shù)據(jù)進(jìn)行：逆序添加/逆序刪除等破壞順序的操作，會(huì)產(chǎn)生沒有必要的真實(shí)DOM更新，界面效果雖然沒有問題，但是數(shù)據(jù)過多的話，會(huì)效率過低；
- 如果結(jié)構(gòu)中還包含輸入類的DOM，會(huì)產(chǎn)生錯(cuò)誤DOM更新，界面有問題；
- 注意！如果不存在對(duì)數(shù)據(jù)的逆序操作，僅用于渲染表用于展示，使用index作為key是沒有問題的。
109.Vue中watch用法詳解
在vue中，使用watch來監(jiān)聽數(shù)據(jù)的變化；
1.監(jiān)聽的數(shù)據(jù)后面可以寫成對(duì)象形式，包含handler方法，immediate和deep。
2.immediate表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler，值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。
3.當(dāng)需要監(jiān)聽一個(gè)對(duì)象的改變時(shí)，普通的watch方法無(wú)法監(jiān)聽到對(duì)象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽。
110.vue中對(duì)mixins的理解和使用
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。混合對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混合對(duì)象時(shí)，所有混合對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
而mixins引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。
可點(diǎn)擊vue中對(duì)mixins的理解和使用的介紹作為參考
111.為什么vue采用異步渲染
因?yàn)槿绻徊捎卯惒礁?#xff0c;那么每次更新數(shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染；所以為了性能考慮，Vue會(huì)在本輪數(shù)據(jù)更新后，再去異步更新視圖。
原理：
1、調(diào)用 notify() 方法，通知watcher 進(jìn)行更新操作
2、依次調(diào)用watcher 的 update 方法
3、對(duì)watcher 進(jìn)行去重操作（通過id），放到隊(duì)列里
4、執(zhí)行完后異步清空這個(gè)隊(duì)列， nextTick(flushSchedulerQueue) 進(jìn)行批量更新操作
112.Vue 的異步更新機(jī)制是如何實(shí)現(xiàn)的？
Vue 的異步更新機(jī)制的核心是利用了瀏覽器的異步任務(wù)隊(duì)列來實(shí)現(xiàn)的，首選微任務(wù)隊(duì)列，宏任務(wù)隊(duì)列次之。
當(dāng)響應(yīng)式數(shù)據(jù)更新后，會(huì)調(diào)用 dep.notify 方法，通知 dep 中收集的 watcher 去執(zhí)行 update 方法，watcher.update 將 watcher 自己放入一個(gè) watcher 隊(duì)列（全局的 queue 數(shù)組）。
然后通過 nextTick 方法將一個(gè)刷新 watcher 隊(duì)列的方法（flushSchedulerQueue）放入一個(gè)全局的 callbacks 數(shù)組中。
如果此時(shí)瀏覽器的異步任務(wù)隊(duì)列中沒有一個(gè)叫 flushCallbacks 的函數(shù)，則執(zhí)行 timerFunc 函數(shù)，將 flushCallbacks 函數(shù)放入異步任務(wù)隊(duì)列。如果異步任務(wù)隊(duì)列中已經(jīng)存在 flushCallbacks 函數(shù)，等待其執(zhí)行完成以后再放入下一個(gè) flushCallbacks 函數(shù)。
flushCallbacks 函數(shù)負(fù)責(zé)執(zhí)行 callbacks 數(shù)組中的所有 flushSchedulerQueue 函數(shù)。
flushSchedulerQueue 函數(shù)負(fù)責(zé)刷新 watcher 隊(duì)列，即執(zhí)行 queue 數(shù)組中每一個(gè) watcher 的 run 方法，從而進(jìn)入更新階段，比如執(zhí)行組件更新函數(shù)或者執(zhí)行用戶 watch 的回調(diào)函數(shù)。
113.$nextTick的理解
用法：
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
為什么？
Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。Vue 在更新 DOM 時(shí)是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個(gè)隊(duì)列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的。然后，在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。
所以為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用。
使用場(chǎng)景
在你更新完數(shù)據(jù)后，需要及時(shí)操作渲染好的 DOM時(shí)
114.vue的自定義指令
Vue除了核心功能默認(rèn)內(nèi)置的指令 ，Vue 也允許注冊(cè)自定義指令。
自定義指令是用來操作DOM的。盡管Vue推崇數(shù)據(jù)驅(qū)動(dòng)視圖的理念，但并非所有情況都適合數(shù)據(jù)驅(qū)動(dòng)。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。
添加自定義指令的兩種方式：
- 全局指令： 通過 Vue.directive() 函數(shù)注冊(cè)一個(gè)全局的指令。
- 局部指令：通過組件的 directives 屬性，對(duì)該組件添加一個(gè)局部的指令。
115.你有寫過自定義指令嗎？自定義指令的應(yīng)用場(chǎng)景有哪些？
例子
116.vue為什么在 HTML 中監(jiān)聽事件？
你可能注意到這種事件監(jiān)聽的方式違背了關(guān)注點(diǎn)分離 (separation of concern) 這個(gè)長(zhǎng)期以來的優(yōu)良傳統(tǒng)。但不必?fù)?dān)心，因?yàn)樗械?Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。實(shí)際上，使用 v-on 或 @ 有幾個(gè)好處：
- 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。
- 因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。
- 當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無(wú)須擔(dān)心如何清理它們
117.Vue.set 改變數(shù)組和對(duì)象中的屬性
在一個(gè)組件實(shí)例中，只有在data里初始化的數(shù)據(jù)才是響應(yīng)的，Vue不能檢測(cè)到對(duì)象屬性的添加或刪除，沒有在data里聲明的屬性不是響應(yīng)的,所以數(shù)據(jù)改變了但是不會(huì)在頁(yè)面渲染；
解決辦法：
使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上
118.vm.$set(obj, key, val) 做了什么？
由于 Vue 無(wú)法探測(cè)對(duì)象新增屬性或者通過索引為數(shù)組新增一個(gè)元素，所以這才有了 vm.s e t ， 它 是 V u e . s e t 的 別 名 。 v m . set，它是 Vue.set 的別名。 vm.set，它是Vue.set的別名。vm.set 用于向響應(yīng)式對(duì)象添加一個(gè)新的 property，并確保這個(gè)新的 property 同樣是響應(yīng)式的，并觸發(fā)視圖更新。
- 為對(duì)象添加一個(gè)新的響應(yīng)式數(shù)據(jù)：調(diào)用 defineReactive 方法為對(duì)象增加響應(yīng)式數(shù)據(jù)，然后執(zhí)行 dep.notify 進(jìn)行依賴通知，更新視圖
- 為數(shù)組添加一個(gè)新的響應(yīng)式數(shù)據(jù)：通過 splice 方法實(shí)現(xiàn)
119.第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？
第一次頁(yè)面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子
120.vue-router有幾種鉤子函數(shù)？
1.全局路由
全局導(dǎo)航鉤子主要有兩種鉤子：前置守衛(wèi)(beforeEach)、后置鉤子(afterEach)
2. 路由獨(dú)享的鉤子
單個(gè)路由獨(dú)享的導(dǎo)航鉤子，它是在路由配置上直接進(jìn)行定義的
?3.組件內(nèi)的導(dǎo)航鉤子
????????組件內(nèi)的導(dǎo)航鉤子主要有這三種：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他們是直接在路由組件內(nèi)部直接進(jìn)行定義的
121.vue-router路由跳轉(zhuǎn)方式
聲明式（標(biāo)簽跳轉(zhuǎn)）
<router-link :to="{name:'home'}"></router-link><router-link :to="{path:'/home'}"></router-link>?編程式（ js跳轉(zhuǎn)）
this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'})122.Vuex是什么？怎么使用？
Vuex是實(shí)現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制，可以方便實(shí)現(xiàn)組件數(shù)據(jù)之間的共享；Vuex集中管理共享的數(shù)據(jù)，易于開發(fā)和后期維護(hù)；能夠高效的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開發(fā)效率；存儲(chǔ)在Vuex的數(shù)據(jù)是響應(yīng)式的，能夠?qū)崟r(shí)保持頁(yè)面和數(shù)據(jù)的同步；
Vuex重要核心屬性包括：state,mutations,action,getters,modules.
state
Vuex 使用單一狀態(tài)樹,即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例，但單一狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)。
mutations
mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)。
action
actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡(jiǎn)單的說就是異步操作數(shù)據(jù)。view 層通過 store.dispath 來分發(fā) action。
getters
類似vue的計(jì)算屬性，主要用來過濾一些數(shù)據(jù)。
modules
項(xiàng)目特別復(fù)雜的時(shí)候，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
123.Vuex和單純的全局對(duì)象有什么區(qū)別？
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
124.為什么 Vuex 的 mutation 中不能做異步操作？
每個(gè)mutation執(zhí)行完成后都會(huì)對(duì)應(yīng)到一個(gè)新的狀態(tài)變更，這樣devtools就可以打個(gè)快照存下來，然后就可以實(shí)現(xiàn) time-travel 了。如果mutation支持異步操作，就沒有辦法知道狀態(tài)是何時(shí)更新的，無(wú)法很好的進(jìn)行狀態(tài)的追蹤，給調(diào)試帶來困難。
125.Vue項(xiàng)目前端開發(fā)環(huán)境請(qǐng)求服務(wù)器接口跨域問題
對(duì)于vue-cli 2.x版本在config文件夾配置服務(wù)器代理；
對(duì)于vue-cli 3.x版本前端配置服務(wù)器代理在vue.config.js中設(shè)置服務(wù)器代理；如下圖：
target對(duì)應(yīng)的屬性值為你準(zhǔn)備向后端服務(wù)器發(fā)送請(qǐng)求的主機(jī)+端口，含義為：相當(dāng)于把前端發(fā)送請(qǐng)求的主機(jī)+端口自動(dòng)替換成掛載的主機(jī)和端口，這樣前后端的主機(jī)端口都一一就不會(huì)存在跨域問題；
ws:表示W(wǎng)ebSocket協(xié)議；
changeOrigin:true;表示是否改變?cè)蛎?#xff1b;這個(gè)一定要選擇為true;
這樣發(fā)送請(qǐng)求的時(shí)候就不會(huì)出現(xiàn)跨域問題了。
126.做過哪些Vue的性能優(yōu)化？
編碼階段
- 盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)都會(huì)增加getter和setter，會(huì)收集對(duì)應(yīng)的watcher
- v-if和v-for不能連用
- 如果需要使用v-for給每項(xiàng)元素綁定事件時(shí)使用事件代理
- SPA 頁(yè)面采用keep-alive緩存組件
- 在更多的情況下，使用v-if替代v-show
- key保證唯一
- 使用路由懶加載、異步組件
- 防抖、節(jié)流
- 第三方模塊按需導(dǎo)入
- 長(zhǎng)列表滾動(dòng)到可視區(qū)域動(dòng)態(tài)加載
- 圖片懶加載
SEO優(yōu)化
- 服務(wù)端渲染SSR
- 預(yù)渲染
打包優(yōu)化
- 壓縮代碼
- Tree Shaking/Scope Hoisting
- 使用cdn加載第三方模塊
- 多線程打包happypack
- splitChunks抽離公共文件
- sourceMap優(yōu)化
127.Vue中的插槽
?Vue中組件神兵利器，插槽Slot
128.v-for 為什么要加上 key
key 的主要功能是提高 vdom 的更新速度；因?yàn)?vue 在 patch （補(bǔ)丁）過程中的 diff 算法對(duì)新舊節(jié)點(diǎn)比對(duì)時(shí)是可以通過 key 精準(zhǔn)判斷兩個(gè)節(jié)點(diǎn)是否是同一個(gè)，從而避免頻繁更新不同元素，使 patch 過程更高效。（源碼位置：src/core/vdom/patch.js）
盡量避免使用index最為key值。
129.Vdom的理解（虛擬DOM）
vdom 就是用 js 對(duì)象來描述真實(shí) DOM，虛擬DOM的實(shí)現(xiàn)就是普通對(duì)象包含tag、data、children等屬性對(duì)真實(shí)節(jié)點(diǎn)的描述。（本質(zhì)上就是在JS和DOM之間的一個(gè)緩存）；由于直接操作 DOM 性能低，但是 js 層的操作效率高，可以將 DOM 操作轉(zhuǎn)化成對(duì)象操作，最終通過diff算法比對(duì)差異進(jìn)行更新DOM (減少了對(duì)真實(shí)DOM的操作)。虛擬DOM不依賴真實(shí)平臺(tái)環(huán)境從而也可以實(shí)現(xiàn)跨平臺(tái)。
優(yōu)點(diǎn)：
1、保證性能下限：可以保證在你不需要手動(dòng)優(yōu)化的情況下，依然可以提供還不錯(cuò)的性能；
2、無(wú)需手動(dòng)操作dom：極大提高我們的開發(fā)效率；
3、跨平臺(tái)：虛擬 DOM 本質(zhì)上是 JavaScript 對(duì)象；
缺點(diǎn)：
無(wú)法進(jìn)行極致優(yōu)化： 在一些性能要求極高的應(yīng)用中虛擬DOM無(wú)法進(jìn)行針對(duì)性的極致優(yōu)化
130.vue 的缺點(diǎn)
1、不支持IE8.0及其以下版本；
2、入門快，但是高階教程少；
3、生態(tài)環(huán)境不如其他框架；
4、社區(qū)不大；
131.vue 和 react 區(qū)別
相同：
1、都使用vdom；
2、都提供了響應(yīng)式和組件化的視圖組件；
3、核心都在UI層（比如路由，狀態(tài)管理，數(shù)據(jù)請(qǐng)求交給其他庫(kù)）；
4、都是單向數(shù)據(jù)流；
5、輕量級(jí)
不同：
1、vue 基于 html 的模板語(yǔ)法，react 是 jsx 語(yǔ)法，可以 html 和 js 混寫；
2、狀態(tài)管理 vue 是 data，react 是 state 但是不能直接修改 state，需要 setState 方法；
3、vue 使用 slot插槽進(jìn)行嵌套傳遞，react 使用 props.children 傳遞；
4、vue 使用指令渲染，react 邏輯運(yùn)算符；
5、父子組件傳值，vue 使用 props 和 $emit，react 使用 props 和子組件觸發(fā)父組件的方法，父組件通過setState修改；
6、路由，vue 路由組件都會(huì)渲染到 router-view 里面，react 是全局組件的方式，子組件作為 children 傳遞到父組件；
7、vue 實(shí)現(xiàn)雙向綁定，react 沒有；
8、vue 父組件更新子組件不會(huì)動(dòng)，react 父更新子必更新，需要手動(dòng)設(shè)置；
132.slot插槽種類以及原理
種類：
1）、匿名插槽：只能有一個(gè)
2）、實(shí)名插槽：可以有多個(gè)，在使用時(shí)必須使用name屬性來標(biāo)識(shí)
原理：
1、父組件先解析，把插槽當(dāng)作子組件的子元素處理；
2、子組件解析，slot作為一個(gè)占位符，會(huì)被解析成一個(gè)函數(shù)；
3、函數(shù)傳入?yún)?shù)執(zhí)行，拿到第一步解析得到的插槽節(jié)點(diǎn)，并返回；
3）、作用域插槽：父組件獲取子組 件slot中攜帶的數(shù)據(jù)
為了讓 user 在父級(jí)的插槽內(nèi)容中可用，我們可以將 user 作為 元素的一個(gè) attribute 綁定上去：
綁定在 元素上的 attribute 被稱為插槽 prop。現(xiàn)在在父級(jí)作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字：?
//父組件 <current-user><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template> </current-user>我們選擇將包含所有插槽 prop 的對(duì)象命名為 slotProps，但你也可以使用任意你喜歡的名字。?
133.template 模板引擎的渲染過程
template 的作用是模板占位符，可幫助我們包裹元素，但在循環(huán)過程當(dāng)中，template不會(huì)被渲染到頁(yè)面上
在 vue 實(shí)例初始化 $mount 的時(shí)候，先調(diào)用 render 函數(shù)如果 render 函數(shù)不存在，則調(diào)用 template 進(jìn)行編譯得到 render 函數(shù)。如果沒有 template 則會(huì)調(diào)用 el 來獲取 template。
渲染過程：
1、獲取模板，并將模板通過 compile 編譯器（通過正則等方式解析 template里面的指令，class、style等）編譯成 AST 語(yǔ)法樹；
2、把得到的 AST 通過 generate 轉(zhuǎn)化成 render 渲染函數(shù)，render 函數(shù)的返回值是 vdom；
3、vue 構(gòu)造函數(shù)直接使用 render 渲染函數(shù)渲染 dom；
134.Vue.use是做什么的，原理是什么
作用：用來注冊(cè)使用插件或者組件的方法。
原理：
1、檢測(cè)組件是否注冊(cè)，避免重復(fù)注冊(cè)；
2、處理入?yún)?#xff0c;將第一個(gè)參數(shù)之后的參數(shù)歸集，并在首部插入 this 上下文；
3、第一個(gè)參數(shù)是對(duì)象就執(zhí)行對(duì)象里面的install方法，是方法則直接執(zhí)行這個(gè)方法，然后緩存；
4、返回；
135.組件中寫 name 選項(xiàng)有哪些好處
1、可以通過名字找到對(duì)應(yīng)的組件（ 遞歸組件：組件自身調(diào)用自身 ）
2、可以通過 name 屬性實(shí)現(xiàn)緩存功能 (keep-alive)
3、可以通過 name 來識(shí)別組件（跨級(jí)組件通信時(shí)非常重要）
4、使用 vue-devtools 調(diào)試工具里顯示的組見名稱是由 vue 中組件 name 決定的
136.data 里面數(shù)據(jù)量比較大如何優(yōu)化
vue 把 data、props、store 等數(shù)據(jù)做成響應(yīng)式，也就是會(huì)對(duì)這些響應(yīng)式數(shù)據(jù)做深度監(jiān)聽，給每一個(gè)object類型的key（包括嵌套o(hù)bject）添加observer（vue3使用proxy）。所以如果我們不需要數(shù)據(jù)是響應(yīng)式的，可以在.vue 文件頭部直接使用 let、const 定義變量，在組件銷毀的時(shí)候?qū)⒃撨@些變量設(shè)為null。
137.子組件里面可以修改父組件的值嗎
答案是傳遞的是對(duì)象和數(shù)組可以修改，如果是基礎(chǔ)數(shù)據(jù)類型也可以修改，但是控制臺(tái)會(huì)報(bào)錯(cuò)；對(duì)象和數(shù)組修改之后父組件是可以監(jiān)聽到這個(gè)值的變化的。那么為什么呢？
對(duì)象和數(shù)組都是引用類型，父組件傳遞過來的是一個(gè)地址，子組件修改的是地址里面的內(nèi)容，地址本身并沒有變，所以不會(huì)報(bào)錯(cuò)，但是基礎(chǔ)數(shù)據(jù)類型就不同了，他是直接修改了傳遞的值，但是 vue 不允許在子組件里面直接修改prop值，所以就會(huì)報(bào)錯(cuò)。
那么基礎(chǔ)類型要怎么修改呢？
?1）、可以使用.sync 修飾符來修改。
2）、子組件用 data 或者 computed 重新定義一個(gè)變量，然后修改新定義的變量。
138.生命周期鉤子是如何實(shí)現(xiàn)的
Vue的生命周期鉤子就是回調(diào)函數(shù)而已，當(dāng)創(chuàng)建組件實(shí)例的過程中會(huì)調(diào)用對(duì)應(yīng)的鉤子方法。
內(nèi)部主要是使用callHook方法來調(diào)用對(duì)應(yīng)的方法。核心是一個(gè)發(fā)布訂閱模式，將鉤子訂閱好(內(nèi)部采用數(shù)組的方式存儲(chǔ))，在對(duì)應(yīng)的階段進(jìn)行發(fā)布。
139.vue 是怎么檢測(cè)數(shù)組的變化的
1、使用函數(shù)劫持的方式，重寫了數(shù)組的方法（push、pop、shift、unshift、sort、reverse、splice）
2、Vue 將 data 中的數(shù)組，進(jìn)行了原型鏈重寫。指向了自己定義的數(shù)組原型方法，這樣當(dāng)調(diào)用數(shù)組api時(shí)，可以通知依賴更新.如果數(shù)組中包含著引用類型。會(huì)對(duì)數(shù)組中的引用類型再次進(jìn)行監(jiān)控。
?流程:
1、初始化傳入 data 數(shù)據(jù)執(zhí)行 initData
2、將數(shù)據(jù)進(jìn)行觀測(cè) new Observer
3、將數(shù)組原型方法指向重寫的原型
4、深度觀察數(shù)組中的引用類型
140.vue 組件渲染和更新的過程
渲染：
1、把模板解析為render函數(shù)
2、觸發(fā)響應(yīng)式，監(jiān)聽data屬性getter setter
3、執(zhí)行render函數(shù)，生成vnode，patch（elem，vnode）
更新：
?1、修改data，觸發(fā)setter（此前在getter中已被監(jiān)聽）
2、重新執(zhí)行render函數(shù)，生成newVnode
3、patch（vnode，newVnode）
141.vue 為什么要使用異步組件
組件功能多打包出的結(jié)果會(huì)變大，我可以采用異步的方式來加載組件。
異步組件的核心是把組件定義成一個(gè)函數(shù)，主要依賴import()這個(gè)語(yǔ)法，可以實(shí)現(xiàn)文件的分割加載。
原理：在createComponent方法中，會(huì)有相應(yīng)的異步組件處理
1、首先定義一個(gè)asyncFactory變量，然后進(jìn)行判斷，如果組件是一個(gè)函數(shù)，然后會(huì)去調(diào)resolveAsyncComponent方法；
2、然后將賦值在asyncFactory上的函數(shù)傳進(jìn)去，會(huì)讓asyncFactory馬上執(zhí)行，執(zhí)行的時(shí)候并不會(huì)馬上返回結(jié)果，因?yàn)樗钱惒降?#xff0c;返回的是一個(gè)promise，這時(shí)候這個(gè)值就是undefined，然后就會(huì)先渲染一個(gè)異步組件的占位，空虛擬節(jié)點(diǎn)。
3、如果加載完之后會(huì)調(diào)factory函數(shù)傳入resolve和reject兩個(gè)參數(shù)，執(zhí)行后返回一個(gè)成功的回調(diào)和失敗的回調(diào)，promise成功了就會(huì)調(diào)resolve；
4、resolve中就會(huì)調(diào)取forceRender方法強(qiáng)制更新視圖重新渲染，forceRender中調(diào)取的就是$forceUpdate，同時(shí)把結(jié)果放factory.resolved上；
5、如果強(qiáng)制刷新的時(shí)候就會(huì)再次走resolveAsyncComponent方法，這時(shí)候有個(gè)判斷，如果有成功的結(jié)果就把結(jié)果直接放回去，這時(shí)候resolveAsyncComponent返回的就不是undefined了，就會(huì)接的創(chuàng)建組件，初始化組件，渲染組件。
142.vue 如何快速定位那個(gè)組件出現(xiàn)性能問題的
? timeline ?具。 通過 timeline 來查看每個(gè)函數(shù)的調(diào)?時(shí)常，定位出哪個(gè)函數(shù)的問題，從?能判斷哪個(gè)組件出了問題
143.v-html 會(huì)導(dǎo)致那些問題
1、可能會(huì)導(dǎo)致xss攻擊，一定要保證你的內(nèi)容是可以依賴的
2、v-html會(huì)替換掉標(biāo)簽內(nèi)部的子元素
3、單頁(yè)面文件里，scoped 樣式不會(huì)作用在 v-html 內(nèi)部，因?yàn)檫@部分內(nèi)容沒有被 模板編譯器處理
4、v-html更新的是元素的 innerHTML 。內(nèi)容按普通 HTML 插入， 不會(huì)作為 Vue 模板進(jìn)行編譯
5、包含的 js 不會(huì)執(zhí)行，因?yàn)闉g覽器渲染的時(shí)候并不會(huì)渲染 js，這時(shí)要在$nextTick中動(dòng)態(tài)創(chuàng)建script標(biāo)簽并插入
144.v-el作用
提供一個(gè)在頁(yè)面上已存在的 DOM元素作為 Vue實(shí)例的掛載目標(biāo).可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例,
145.說說vue的動(dòng)態(tài)組件
動(dòng)態(tài)組件就是幾個(gè)組件放在一個(gè)掛載點(diǎn)下，然后根據(jù)父組件的某個(gè)變量來決定顯示哪個(gè)，或者都不顯示。
在掛載點(diǎn)使用 component 標(biāo)簽，然后使用 is =“組件名”，它會(huì)自動(dòng)去找匹配的組件名，如果有，則顯示；
146.怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過來的值？
可以有兩種方式傳遞參數(shù)：params、query
1）、params：在 router 目錄下的 index.js 文件中，對(duì) path 屬性加上 /:id，使用 router 對(duì)象的 params.id 獲取。
?2）、query：不需要配置路由格式，使用 router 對(duì)象的 query.id 獲取。
// 方法1： <router-link :to="{ name: 'users', query: { id: 123}}">按鈕</router-link> // 方法2： this.$router.push({ name: 'users', query:{ id:123}}) // 方法3： <router-link :to="{ path: '/user', query: { id:123 }}">按鈕</router-link> // 方法4： this.$router.push({ path: '/user', query:{ id:123 }}) // 方法5： this.$router.push('/user?uname=' + 123)147.自定義指令
自定義指令的生命周期，有5個(gè)事件鉤子,可以設(shè)置指令在某一個(gè)事件發(fā)生時(shí)的具體行為：
bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）。
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。
?鉤子函數(shù)的參數(shù) (包括 el，binding，vnode，oldVnode)
?el: 指令所綁定的元素，可以用來直接操作 DOM 。
binding: 一個(gè)對(duì)象，包含以下屬性：name: 指令名、value: 指令的綁定值、oldValue: 指令綁定的前一個(gè)值、expression: 綁定值的字符串形式、arg: 傳給指令的參數(shù)、modifiers: 一個(gè)包含修飾符的對(duì)象。
vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)。
oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
4
總結(jié)
以上是生活随笔為你收集整理的2022年前端Vue常见面试题大全（三万长文）持续更新...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2020张宇1000题【好题收集】【第三
- 下一篇： 第四阶段vue项目总结(新手小白一枚，不