Vue2
一、vue2的生命周期鉤子有哪些倾鲫？數(shù)據(jù)請求放在哪個鉤子？
生命周期鉤子：
創(chuàng)建：
beforeCreate – 數(shù)據(jù)data初始化前
created – 數(shù)據(jù)data初始化之后
掛載：
beforeMount – 數(shù)據(jù)準備渲染（此時data和template生成了html但還未在頁面中渲染）
Mounted – 數(shù)據(jù)渲染完成（模板的html已經渲染到了頁面刻撒，且只執(zhí)行一次）
更新：實時監(jiān)控數(shù)據(jù)變化什湘，隨時更新DOM
beforeUpdate – 數(shù)據(jù)更新前
updated – 數(shù)據(jù)更新
銷毀：
beforeDestroy – Vue實例銷毀之前執(zhí)行
destroyed – Vue實例銷毀之后執(zhí)行
還有三個不常用
緩存：
activated:被keep-alive緩存的組件激活時調用。
deactivated：被keep-alive緩存的組件失活時調用赎离。
錯誤處理
errorCaptured：組件或組件的后代發(fā)生錯誤調用逛犹。
數(shù)據(jù)請求放在 mounted 里面，因為放在其他地方都不合適（xjb扯）梁剔。
為什么不放在created里面虽画？
SSR
如果放到created里面，會在后端執(zhí)行一次荣病，前端執(zhí)行一次码撰。
SSR會執(zhí)行created。把組件放到前端時再執(zhí)行一次created个盆。
二脖岛、Vue2組件間通信的方式有哪些？
父子組件：使用「props 和事件」進行通信詳情
爺孫組件：
使用兩次父子組件間通信來實現(xiàn)
使用「provide + inject」來通信
任意組件：使用 eventBus = new Vue() 來通信
主要API 是 eventBus.emit
缺點是事件多了就很亂颊亮，難以維護
使用 Event Bus 實現(xiàn)兄弟組件通信【Vue 小技巧】_嗶哩嗶哩_bilibili
任意組件：使用 Vuex 通信（Vue 3 可用 Pinia 代替 Vuex）
三柴梆、Vuex用過嗎？怎么理解终惑？
1绍在、背下文檔第一句：Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式 + 庫
2、說出核心概念的名字和作用：store/State/Getter/Mutation/Action/Module
store 是個大容器雹有，包含以下所有內容
State 用來讀取狀態(tài)偿渡，帶有一個 mapState 輔助函數(shù)
Getter 用來讀取派生狀態(tài)（你讀的東西是計算出來的，比如名字加年齡）件舵，附有一個 mapGetters 輔助函數(shù)
Mutation 用于同步提交狀態(tài)變更卸察，附有一個 mapMutations 輔助函數(shù)
Action 用于異步變更狀態(tài)脯厨，但它提交的是 mutation铅祸，而不是直接變更狀態(tài)。
Module 用來給 store 劃分模塊合武，方便維護代碼
常見追問：Mutation 和 Action 為什么要分開临梗？
答案：為了讓代碼更易于維護。（可是 Pinia 就把 Mutation 和 Action 合并了呀）
如果反問為啥Pinia把他們合并了：減少一些概念稼跳，讓代碼更容易理解盟庞。
復雜是為了維護簡單是為了理解 萬能答案。
四汤善、VueRouter用過嗎什猖？怎么理解票彪？
1、背下文檔第一句：Vue Router 是 Vue.js 的官方路由不狮。它與 Vue.js 核心深度集成降铸，讓用 Vue.js 構建單頁應用變得輕而易舉。
2摇零、說出核心概念的名字和作用：router-link（點擊跳轉） router-view（容納路由視圖） 嵌套路由（路由加一個child路由里面還有路由推掸，子路由渲染到router-view中）、Hash 模式和 History 模式驻仅、導航守衛(wèi)谅畅、懶加載
常見追問：
Hash 模式和 History 模式的區(qū)別？
一個用的 URL的Hash噪服，一個用的HTML5的 History API
哈希模式不需要后端 nginx 配合（把所有的HTML請求都重定向到index）毡泻，一個需要后端配合
導航守衛(wèi)如何實現(xiàn)登錄控制？
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next()//如果是登錄頁面直接放行
//你想去受控頁面但是又沒有登錄我給你重定向到登錄頁面
if (to是受控頁面 && 沒有登錄) return next('/login')
//如果你不是受控頁面或者已經登錄了直接next放行
next()
})
導航守衛(wèi)就是每一個路由都可以設置一個鉤子芯咧，進入離開路由以及在路由解析的時候做什么牙捉。
import（‘APP’）importAPP組件
加括號把這個組件放到路由里面這就是懶加載。
https://blog.csdn.net/sinat_36521655/article/details/106125910
五敬飒、Vue2 如何實現(xiàn)雙向綁定邪铲？
1、一般使用 v-model / .sync 實現(xiàn)无拗，
v-model 是 v-bind:value 和 v-on:input 的語法糖
- v-bind:value 實現(xiàn)了 data ? UI 的單向綁定
- v-on:input 實現(xiàn)了 UI ? data 的單向綁定
加起來就是雙向綁定了
2带到、這兩個單向綁定是如何實現(xiàn)的呢？
- v-bind:value通過 Object.defineProperty API 給 data每一個屬性遞歸的創(chuàng)建 getter 和 setter英染，用于監(jiān)聽 data 的改變揽惹，data 一變就會安排改變 UI
- v-on:input通過 template compiler 給 DOM 添加事件監(jiān)聽，DOM input 的值變了就會去修改 data四康。
Vue3
一搪搏、Vue3為什么使用Proxy?
-
彌補 Object.defineProperty 的兩個不足
- 動態(tài)創(chuàng)建的 data 屬性需要用 Vue.set 來賦值，Vue 3 用了 Proxy 就不需要了
- 基于性能考慮闪金，Vue 2 篡改了數(shù)組的 7 個 API疯溺，Vue 3 用了 Proxy 就不需要了
defineProperty 需要提前遞歸地遍歷 data 做到響應式，而 Proxy 可以在真正用到深層數(shù)據(jù)的時候再做響應式（惰性）
二哎垦、Vue 3 為什么使用 Composition API囱嫩？
答案參考尤雨溪的博客：Vue Function-based API RFC - 知乎 (zhihu.com)
-
Composition API 比 mixins、高階組件漏设、extends墨闲、Renderless Components 等更好，原因有三：
- 模版中的數(shù)據(jù)來源不清晰郑口。
- 命名空間沖突鸳碧。
- 性能盾鳞。
更適合 TypeScript
二、Vue 3 與Vue2 對比做了哪些改動瞻离？
createApp() 代替了 new Vue()
v-model 代替了以前的 v-model 和 .sync
根元素template 可以有不止一個元素了
新增 Teleport 傳送門
destroyed 被改名為 unmounted 了（before 當然也改了）
ref 屬性支持函數(shù)了
其他建議自己看看寫寫。
