dom vue 加载完 执行_前端面试题——Vue
前言
前幾天整理了一些 html + css + JavaScript 常見的面試題(https://segmentfault.com/u/youdangde_5c8b208a23f95/articles)，然后現在也是找了一些在 Vue 方面經常出現的面試題，留給自己查看消化，也分享給有需要的小伙伴。
如果文章中有出現紕漏、錯誤之處，還請看到的小伙伴留言指正，先行謝過。
以下 ↓
1. 說一下 Vue 的雙向綁定數據的原理
vue 實現數據雙向綁定主要是：采用數據劫持結合“發布者 - 訂閱者”模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter、 getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。
2. 解釋單向數據流和雙向數據綁定
單向數據流： 顧名思義，數據流是單向的。數據流動方向可以跟蹤，流動單一，追查問題的時候可以更快捷。缺點就是寫起來不太方便。要使 UI 發生變更就必須創建各種 action 來維護對應的 state。
雙向數據綁定：數據之間是相通的，將數據變更的操作隱藏在框架內部。優點是在表單交互較多的場景下，會簡化大量與業務無關的代碼。缺點就是無法追蹤局部狀態的變化，增加了出錯時 debug 的難度。
3. Vue 如何去除 URL 中的
vue-router 默認使用 hash 模式，所以在路由加載的時候，項目中的 URL 會自帶 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一種模式 history：
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是，當我們啟用 history 模式的時候，由于我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 “404” 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 “index.html” 頁面。
4. 對 MVC、MVVM 的理解
MVC
特點：
View?傳送指令到?Controller；Controller?完成業務邏輯后，要求?Model?改變狀態；Model?將新的數據發送到?View，用戶得到反饋。
所有通信都是單向的。
MVVM
特點：
各部分之間的通信，都是雙向的；
采用雙向綁定：?
View?的變動，自動反映在?ViewModel，反之亦然。
5. Vue 生命周期的理解
Vue 實例有一個完整的生命周期，生命周期也就是指一個實例從開始創建到銷毀的這個過程。
beforeCreated()：在實例創建之間執行，數據未加載狀態。created()：在實例創建、數據加載后，能初始化數據，DOM 渲染之前執行。beforeMount()：虛擬 DOM 已創建完成，在數據渲染前最后一次更改數據。mounted()：頁面、數據渲染完成，真實 DOM 掛載完成。beforeUpadate()：重新渲染之前觸發。updated()：數據已經更改完成，DOM 也重新 render 完成，更改數據會陷入死循環。beforeDestory()?和?destoryed()：前者是銷毀前執行(實例仍然完全可用)，后者則是銷毀后執行。
6. 組件通信
父組件向子組件通信
子組件通過 props 屬性，綁定父組件數據，實現雙方通信。
子組件向父組件通信
將父組件的事件在子組件中通過 $emit 觸發。
非父子組件、兄弟組件之間的數據傳遞
/*新建一個Vue實例作為中央事件總嫌*/
let event = new Vue();
/*監聽事件*/
event.$on('eventName', (val) => {
//......do something
});
/*觸發事件*/
event.$emit('eventName', 'this is a message.')
7. vue-router 路由實現
路由就是用來跟后端服務器進行交互的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能。
8. v-if 和 v-show 區別
使用 v-if 的時候，如果值為 false ，那么頁面將不會有這個 html 標簽生成。
v-show 則是不管值為 true 還是 false ， html 元素都會存在，只是 CSS 中的 display 顯示或隱藏。
9. $route 和 $router 的區別
$router 為 VueRouter 實例，想要導航到不同 URL，則使用 $router.push 方法。
$route 為當前 router 跳轉對象里面可以獲取 name 、 path 、 query 、 params 等。
10. NextTick 是做什么的
$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM。
具體可參考官方文檔：深入響應式原理(https://cn.vuejs.org/v2/guide/reactivity.html)。
11. Vue 組件 data 為什么必須是函數
因為 JS 本身的特性帶來的，如果 data 是一個對象，那么由于對象本身屬于引用類型，當我們修改其中的一個屬性時，會影響到所有 Vue 實例的數據。如果將 data 作為一個函數返回一個對象，那么每一個實例的 data 屬性都是獨立的，不會相互影響了。
12. 計算屬性 computed 和事件 methods 有什么區別
我們可以將同一函數定義為一個 method 或者一個計算屬性。對于最終的結果，兩種方式是相同的。
不同點：
computed：計算屬性是基于它們的依賴進行緩存的，只有在它的相關依賴發生改變時才會重新求值。method：只要發生重新渲染，?method?調用總會執行該函數。
13. 對比 jQuery ，Vue 有什么不同
jQuery 專注視圖層，通過操作 DOM 去實現頁面的一些邏輯渲染； Vue 專注于數據層，通過數據的雙向綁定，最終表現在 DOM 層面，減少了 DOM 操作。
Vue 使用了組件化思想，使得項目子集職責清晰，提高了開發效率，方便重復利用，便于協同開發。
16. Vue 中怎么自定義指令
全局注冊
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注冊
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
參考官方文檔：自定義指令(https://cn.vuejs.org/v2/guide/custom-directive.html)。
15. Vue 中怎么自定義過濾器
可以用全局方法 Vue.filter() 注冊一個自定義過濾器，它接收兩個參數：過濾器 ID 和過濾器函數。過濾器函數以值為參數，返回轉換后的值。
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
v-text="message | reverse">
過濾器也同樣接受全局注冊和局部注冊。
16. 對 keep-alive 的了解
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
可以使用 API 提供的 props，實現組件的動態緩存。
具體參考官方API(https://cn.vuejs.org/v2/api/#keep-alive)。
17. Vue 中 key 的作用
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。
有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。
具體參考官方API(https://cn.vuejs.org/v2/api/#key)。
18. Vue 的核心是什么
數據驅動、組件系統。
19. Vue 等單頁面應用的優缺點
優點
良好的交互體驗
良好的前后端工作分離模式
減輕服務器壓力
缺點
SEO 難度較高
前進、后退管理
初次加載耗時多
后記
整理的過程也是重新梳理知識點的過程，途中會發現很多自己理解不是很到位的東西，也算是一種收獲吧。
后面會一直不定期更新一些其他方面的面試題或者遇到的有趣的東西，感興趣的小伙伴可以關注哦。
完整版面試題：https://github.com/ltadpoles/web-document/tree/master/Other
遇見更優秀的自己，從現在開始！
以上。
歡迎關注 SegmentFault 微信公眾號 :)
總結
以上是生活随笔為你收集整理的dom vue 加载完 执行_前端面试题——Vue的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 洗车 多少钱啊？
- 下一篇： 二叉树线索化示意图_103-线索化二叉树