Vue面試題
https://blog.csdn.net/qq_44182284/article/details/111191455
http://www.reibang.com/p/85a4fcd3de98
https://juejin.cn/post/6961222829979697165
單頁面應(yīng)用****spa****（過）
在web頁面加載完html屡萤，js回梧，css后手素，由路由機制實現(xiàn)html頁面內(nèi)容變換
優(yōu)點是用戶體驗好窘拯，頁面不需要重新加載或者跳轉(zhuǎn)，前后端分離
缺點：首次加載慢躲株，頁面前進后退路由管理片部，SEO 難度較大
什么是 MVVM？（練2）
MVVM 是是 Model-View-ViewModel 的縮寫
Model 代表數(shù)據(jù)模型霜定， 定義數(shù)據(jù)操作的業(yè)務(wù)邏輯
View 代表 UI 組件档悠， 它負責將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)出來
ViewModel 通過雙向綁定把 View 和Model 進行同步交互，不需要手動操作 DOM 的一種設(shè)計思想
請說說雙向綁定實現(xiàn)的原理然爆？（練2）
vue實現(xiàn)雙向數(shù)據(jù)綁定主要是通過數(shù)據(jù)劫持并結(jié)合（發(fā)布者-》訂閱者）的方式
主要實現(xiàn)的方法是通過object.defineproperty()來劫持各個屬性的setter站粟，getter方法，在數(shù)據(jù)變動的時候發(fā)布消息給訂閱者曾雕，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)
為什么data是個函數(shù)并且返回一個對象呢奴烙？（過）
因為一個組件可能會多處調(diào)用，而每一次調(diào)用就會執(zhí)行data函數(shù)并返回新的數(shù)據(jù)對象剖张，
這樣做可以避免多處調(diào)用組件間的數(shù)據(jù)污染
v-model的原理是什么（練2）
v-model本質(zhì)就是一個語法糖切诀，可以看成是value + input方法的語法糖。 可以通過model屬性的prop和event屬性來進行自定義搔弄。原生的v-model幅虑，會根據(jù)標簽的不同生成不同的事件和屬性
（text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件顾犹；
）
v-show 和 v-if 指令的共同點和不同點倒庵。（過）
v-show是通過display來控制顯示隱藏
v-if是操作dom元素來控制顯示隱藏
如果需要非常頻繁地切換，則使用 v-show 較好
computed 和 watch 的區(qū)別和運用的場景炫刷？（練2）
- computed 具有返回值擎宝，具有緩存，依賴其他屬性進行計算返回浑玛，
使用場景：當我們要進行數(shù)值計算,而且依賴于其他數(shù)據(jù)绍申，那么把這個數(shù)據(jù)設(shè)計為computed
- watch的值必須先在data中定義，當值發(fā)生改變觸發(fā)watch，然后進行邏輯處理极阅，可以做異步操作胃碾，watch接收兩個參數(shù)newvalu和oldvalue
使用場景：如果你需要在某個數(shù)據(jù)變化時做一些事情，使用watch來觀察這個數(shù)據(jù)變化
Vue生命周期（過）
創(chuàng)建前筋搏，可以在這加個 loading 事件仆百，在加載實例時觸發(fā)。
創(chuàng)建后奔脐，在這結(jié)束 loading 事件儒旬，異步請求也放在這里調(diào)用。
掛載前
掛載后帖族，掛載元素，獲取到 DOM 節(jié)點挡爵。
更新前
更新后竖般，如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)
銷毀前茶鹃，可以做一個確認停止事件的確認框涣雕。
銷毀后
activated keep-alive 專屬，組件被激活時調(diào)用
deactivated keep-alive 專屬闭翩，組件被銷毀時調(diào)用
beforeCreate 挣郭，可以在這加個 loading 事件，在加載實例時觸發(fā)疗韵。
created 兑障，在這結(jié)束 loading 事件，異步請求也放在這里調(diào)用蕉汪。
beforeMount
Mounted流译，掛載元素，獲取到 DOM 節(jié)點者疤。
beforeUpdate
updated 福澡，如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)
beforeDestroy 驹马，可以做一個確認停止事件的確認框革砸。
destroyed
activated keep-alive 專屬，組件被激活時調(diào)用
deactivated keep-alive 專屬糯累，組件被銷毀時調(diào)用
第一次頁面加載會觸發(fā)哪幾個鉤子算利？（過） 第一次頁面加載時會觸發(fā) 創(chuàng)建前后，掛載前后 這幾個鉤子
DOM 渲染在****哪個周期中就已經(jīng)完成寇蚊？（過） DOM 渲染在 mounted 中就已經(jīng)完成了笔时。
深度監(jiān)聽怎么做（過）
watch 里面的deep屬性設(shè)置為true
Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？（過）
Vue 父子組件生命周期鉤子的執(zhí)行順序遵循：從外到內(nèi)仗岸，再從內(nèi)到外允耿。
- 加載渲染過程
父更新前 -> 父更新后 -> 父掛載前 -> 子更新前 -> 子更新后 -> 子掛載前 -> 子掛載后 -> 父掛載后
- 子組件更新過程
父更新前 -> 子更新前 -> 子更新后 -> 父更新后
- 父組件更新過程
父更新前-> 父更新后
- 銷毀過程
父銷毀前-> 子銷毀前 -> 子銷毀后-> 父銷毀后
Vue****組件間通信（練****2****）
v-model
listeners
vuex
$root（可以拿到根組件的屬性和方法）
Props（常用）（子組件通過props接收父組件傳遞過來的數(shù)據(jù)）
provide/inject（父組件通過provide方法定義方法或者屬性借笙，子組件通過inject接收方法和屬性）
Emit（子組件通過emit發(fā)送事件給父組件，父組件通過回調(diào)函數(shù)接收數(shù)據(jù)）
ref（父組件可以通過ref拿到子組件的屬性和方法）
slot（子組件的數(shù)據(jù)通過插槽的方式傳給父組件使用）
eventBus（通過Bus.
on監(jiān)聽事件）
parent（通過this.
parent獲取父組件的方法和屬性）
https://juejin.cn/post/6999687348120190983#heading-13
Vue****單向數(shù)據(jù)流
1. 單向數(shù)據(jù)流就是model的更新會觸發(fā)view的更新，view的更新不會觸發(fā)model的更新蚂蕴，它們的作用是單向的
Keep-alive****組件（過）
keep-alive 可以實現(xiàn)組件緩存低散，當組件切換時不會對當前組件進行卸
Keep-alive有3個屬性，include骡楼，exclude 熔号，max，代表匹配的組件會不會被緩存鸟整，還有緩存多少組件實例
keep-alive觸發(fā)的生命周期有activated 引镊，deactivated
Vue****檢測對象或者數(shù)組的變化（練****1****）
vue可以監(jiān)測數(shù)組變化的方法有七種 pop 、 push 篮条、 shift 弟头、 unshift 、 splice 涉茧、 sort 赴恨、 reverse
Vue 無法檢測到對象屬性的添加或刪除，或者通過下標改變數(shù)組的值
我們可以使用Vue.set(object, key, value)來設(shè)置值的改變而被vue監(jiān)聽到
Vue****中****key****的作用（練****1****）
Keys 是是vue用于追蹤列表中的元素被刪除伴栓，添加伦连，修改的輔助標識，可以避免元素不必要的重復渲染
NextTick****的原理使用場景（練****2****）
NextTick作用在下一次dom更新結(jié)束后執(zhí)行他指定的回調(diào)
使用就是當數(shù)據(jù)改變后挣饥，要基于更新后的新dom進行一些操作的時候除师，可以把邏輯寫在nexttick指定的回調(diào)函數(shù)中
比如在點擊編輯的時候更改了數(shù)據(jù)的狀態(tài)后需要對一個input框獲取焦點，可以吧這一段邏輯寫入nextTick中
Vuex
vuex是vue團隊提供的一個狀態(tài)管理工具扔枫，
vuex的使用場景多個組件共享數(shù)據(jù)或者是跨組件傳遞數(shù)據(jù)時
vuex****的****5****種屬性（練****1****）
state：vuex的基本數(shù)據(jù)汛聚，用來存儲變量
geeters：當state中的數(shù)據(jù)需要加工后再使用時，可以通過getters加工短荐，和計算屬性一樣具有返回值
mutation：通過commit提交數(shù)據(jù)來變更state的值倚舀，每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) ，回調(diào)函數(shù)接收一個state合集和commit過來的value
action：和mutation的功能大致相同忍宋，不一樣的地方是1. Action 提交的是 mutation痕貌，而不是直接變更狀態(tài)。 2. Action 可以包含任意異步操作糠排。3.action是通過dispatch提交type和value來變更state
modules：模塊化vuex舵稠，可以讓每一個模塊擁有自己的state、mutation、action哺徊、getters,使得結(jié)構(gòu)非常清晰室琢，方便管理。
Vuex****的流程是
Vue-router****的兩種模式
路由模式有2種落追，hash和history模式
hash值不會帶給服務(wù)器盈滴，#號后的內(nèi)容就是hash值，hash值兼容性更好轿钠，我們開發(fā)中使用的就是hash值
history模式的url更簡潔巢钓，兼容性沒有hash模式好
Vue-router****有哪幾種導航鉤子和路由守衛(wèi)
全局守衛(wèi)（router.beforeEach，router.afterEach）
路由獨享守衛(wèi)（beforeEnter）
路由組件內(nèi)的守衛(wèi)（beforeRouteEnter疗垛，beforeRouteLeave ）
(to, from, next)
你都做過哪些****Vue****的性能優(yōu)化
編碼階段
盡量減少data中的數(shù)據(jù)症汹，data中的數(shù)據(jù)都會增加getter和setter，會收集對應(yīng)的watcher
v-if和v-for不能連用
如果需要使用v-for給每項元素綁定事件時使用事件代理
SPA 頁面采用keep-alive緩存組件
在更多的情況下贷腕，使用v-if替代v-show
key保證唯一
使用路由懶加載烈菌、異步組件
防抖、節(jié)流
第三方模塊按需導入
長列表滾動到可視區(qū)域動態(tài)加載
圖片懶加載
SEO****優(yōu)化
預(yù)渲染
服務(wù)端渲染SSR
打包優(yōu)化
壓縮代碼
Tree Shaking/Scope Hoisting
使用cdn加載第三方模塊
多線程打包happypack
splitChunks抽離公共文件
sourceMap優(yōu)化
用戶體驗
骨架屏
PWA
Mixin****和****Mixins****的區(qū)別
Vue****動態(tài)組件
Vue****中局部作用域樣式花履、
Vue3.0****雙向綁定原理
v-if和v-for一起使用的弊端及解決辦法
由于v-for的優(yōu)先級比v-if高，所以導致每循環(huán)一次就會去v-if一次挚赊，而v-if是通過創(chuàng)建和銷毀dom元素來控制元素的顯示與隱藏诡壁，所以就會不停的去創(chuàng)建和銷毀元素，造成頁面卡頓荠割，性能下降妹卿。
解決辦法：
在v-for的外層或內(nèi)層包裹一個元素來使用v-if
用computed處理
Vue的優(yōu)點？Vue的缺點蔑鹦？
組件化夺克，輕量級，虛擬dom嚎朽，響應(yīng)式铺纽，單頁面路由，數(shù)據(jù)與視圖分開
頁面不利于seo哟忍，不支持IE8以下狡门，首屏加載時間長
Vue跟React的異同點
相同點：
都使用了虛擬dom
組件化開發(fā)
都是單向數(shù)據(jù)流(父子組件之間，不建議子修改父傳下來的數(shù)據(jù))
都支持服務(wù)端渲染
不同點：
React的JSX锅很，Vue的template
數(shù)據(jù)變化其馏，React手動(setState)，Vue自動(初始化已響應(yīng)式處理爆安，Object.defineProperty)
React單向綁定叛复，Vue雙向綁定
React的Redux，Vue的Vuex
列表渲染中 key的作用
方便diff 算法快速找到變更的元素，然后進行相應(yīng)的 DOM 更新
組件間的通信(基本是必問題)
父子組件：子組件通過 Props 接收父組件傳入的值褐奥，如果父組件想拿到子組件的數(shù)據(jù)咖耘，可通過 $emit 一個事件，將數(shù)據(jù)當參數(shù)傳遞出去抖僵，然后父組件通過事件監(jiān)聽接收
兄弟組件：
通過找到共同的父級組件鲤看，然后通過 $emit 將數(shù)據(jù)傳遞到父級組件，都從父級組件取數(shù)據(jù)
Vuex全局數(shù)據(jù)共享
通過 Vue 全局事件總線耍群，不過因為 vue 3 已經(jīng)廢棄了 this.
off 這些全局 API义桂，所以在 vue3中已經(jīng)無法使用全局事件總線了，可以通過方法 4 解決
使用第三方 PubSub 工具
Provide/Inject:只適用于父子級或者祖孫級或者更深層次嵌套中蹈垢，父級組件向子級組件傳值
$nextTick 的作用
Vue 2 中數(shù)組是無法實現(xiàn)響應(yīng)式的慷吊，需要通過 $set 手動實現(xiàn)
自定義全局 API
通過給 Vue 原型綁定方法實現(xiàn)，不過同樣的此方法不適用于 Vue3曹抬，在 Vue 3中通過給app實例config 配置全局屬性
Vue2.x =è Vue.prototype.customMethod = function() {}
Vue3.x è app.config.globalProperties
Vue2Vue3不同點
自定義指令
