P13-Vue高頻面試題

5.你知道Vue響應式數據原理嗎? Proxy 與 object.defineProperty 優(yōu)劣對比?

響應式原理：

vue的響應式實現(xiàn)主要是利用了 object.defineproperty的方法里面的setter 與getter方法的觀察者模式來實現(xiàn)。在組件初始化時會給每一個data屬性注冊getter和setter，然后再new 一個自己的watcher對象，此時watcher會即調用組件的render函數去生成虛擬DOM。在調用render的時候，就會需要用到data的屬性值，此時會觸發(fā)getter函數，將當前的watcher函數注冊進sub里。當data屬性發(fā)生改變之后，就會遍歷sub里所有的watcher對象，通知它們去重新渲染組件。

Proxy的優(yōu)勢：

• Proky 可以直接監(jiān)聽對象而非屬性，可以直接監(jiān)聽數組的變化
• Proxy 有多達 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等是object.defineProperty 不具備的;
• Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 bject.defineproperty 只能遍歷對象屬性直接修改;

Object.defineProperty的優(yōu)勢：

• 兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfi11(墊片)來彌補

7.對比jQuery，Vue 有什么不同

jQuery 專注視圖層，通過直接操作 DOM 去實現(xiàn)頁面的一些邏輯染: Vue 專注于數據層，通過數據的雙向綁定，最終表現(xiàn)在 DOM 層面，減少了 DOM 操作。vue 使用了組件化思想，使得項目子集職責清晰，提高了開發(fā)效率，方便重復利用，便于協(xié)同開發(fā)

P14 Vue高頻面試題

14.Vue中keep-alive的作用

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新染。一旦使用keepalive包裹組件，此時mouted，created等鉤子函數只會在第一次進入組件時調用，當再次切換回來時將不會調用。此時如果我們還想在每次切換時做一些事情，就需要用到另外的周期函數，actived和deactived，這兩個鉤子函數只有被keepalive包裹后才會調用。