2019 vue常見面試題

1. vue 組件的生命週期?

vue生命週期.png

vue生命週期.jpeg

beforeCreate() { // 這是我們遇到的第一個生命週期函數,表示實例完全被創建出來之前,會執行它
        // console.log(this.msg)
        // this.show()
        // 注意: 在 beforeCreate 生命週期函數執行的時候,data 和 methods 中的 數據都還沒有沒初始化
      },
      created() { // 這是遇到的第二個生命週期函數
        // console.log(this.msg)
        // this.show()
        //  在 created 中,data 和 methods 都已經被初始化好了!
        // 如果要調用 methods 中的方法,或者操作 data 中的數據,最早,只能在 created 中操作
      },
      beforeMount() { // 這是遇到的第3個生命週期函數,表示 模板已經在內存中編輯完成了,但是尚未把 模板渲染到 頁面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 執行的時候,頁面中的元素,還沒有被真正替換過來,只是之前寫的一些模板字符串
      },
      mounted() { // 這是遇到的第4個生命週期函數,表示,內存中的模板,已經真實的掛載到了頁面中,用戶已經可以看到渲染好的頁面了
        // console.log(document.getElementById('h3').innerText)
        // 注意: mounted 是 實例創建期間的最後一個生命週期函數,當執行完 mounted 就表示,實例已經被完全創建好了,此時,如果沒有其它操作的話,這個實例,就靜靜的 躺在我們的內存中,一動不動
      },
 
 
      // 接下來的是運行中的兩個事件
      beforeUpdate() { // 這時候,表示 我們的界面還沒有被更新【數據被更新了嗎?  數據肯定被更新了】
        /* console.log('界面上元素的內容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 數據是:' + this.msg) */
        // 得出結論: 當執行 beforeUpdate 的時候,頁面中的顯示的數據,還是舊的,此時 data 數據是最新的,頁面尚未和 最新的數據保持同步
      },
      updated() {
        console.log('界面上元素的內容:' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 數據是:' + this.msg)
        // updated 事件執行的時候,頁面和 data 數據已經保持同步了,都是最新的
      }


2. created 和 mounted 有什麼區別?(掛載完成之後 this.$el 獲取當前組件的 dom 元素)

1. mounted一般是在html渲染完成後的操作,此時el,data都已經加載完成,一般對dom的操作都寫在mounted中,例如獲取innerHTML,初始化echarts的時候。  
2. created一般是在html渲染前的操作,此時el還是undefined,data已經存在。這裏不能對dom進行操作  

3. keep-alive:keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節省性能,由於是一個抽象組件,所以在v頁面渲染完畢後不會被渲染成一個DOM元素。

當組件在keep-alive內被切換時組件的activated、deactivated這兩個生命週期鉤子函數會被執行

4. slot 插槽(就是組件的佔位符):slot(匿名插槽,具名插槽)與slot-scope(作用域插槽)

1. .單個插槽 -> 匿名插槽
2. 具名插槽:  

需要多個插槽時,可以利用 元素的一個特殊的特性:name來定義具名插槽
3. 作用域插槽——帶數據的插槽
單個插槽和具名插槽中插槽上不綁定數據,所以父組件提供的模板既要包括樣式又要包括數據,而作用域插槽是子組件提供數據,父組件只需要提供一套樣式

5. 組件之間傳值

1. 父傳子:通過屬性進行傳遞(在子組件標籤上綁定自定義屬性名,值是父組件要傳遞的數據,在子組件內部通過props屬性接收屬性名)  
2. 子傳父:通過事件派發(在子組件標籤上綁定自定義事件,子組件內部通過$emit給該事件推送數據,父組件內部通過函數接收)  
3. 平行組件(事件總線):使用eventbus事件總線,在代碼中創建一個空白的vue實例,所有事件派發和監聽都在此實例上進行。

6. 計算屬性?主要用一些簡單的計算。–計算屬性只有在它的相關依賴發生改變時纔會重新求值。

7. 計算屬性和 methods 有什麼區別?–>總結:computed計算屬性的緩存原理在我們處理大量數據的時候使用可以大大提高效率,不必在數據沒有發生改變的時候重新獲取數據的值,可直接獲取到結果,並且只執行綁定依賴的方法。methods裏方法在依賴的值改變後,只有設置觸發纔會重新執行methods裏相關的方法。

1. 計算屬性方法調用不用加();methods需要;
2. 執行機制  

computed裏的方法在初始化執行過後,只要任何值有更新,那麼所有在computed計算屬性裏和其相關的值都會更新。
methods只有在調用的時候纔會執行對應的方法,不會自動同步數據。
computed計算屬性跟methods在內部的函數寫起來沒有什麼區別,只是在調用的時候不一樣

8. 過濾器?

 1. 過濾就是一個數據經過了這個過濾之後出來另一樣東西,可以是從中取得你想要的,或者給那個數據添加點什麼裝飾,那麼過濾器則是過濾的工具  
 2. 過濾器怎麼串聯使用

//在雙花括號中 

{{ message | capitalize }}

//在 `v-bind` 中 

<p v-bind:id="rawId | formatId"></p>

//也可以串聯多個過濾器 

{{ message | filterA | filterB }}

9. vue 中怎麼定義組件,組件定義需要注意什麼事情?

10. 在 vue 中如何定義一個類似於 element-ui 的組件庫?

11. vue-router

路由的兩種模式:history,hash
路由傳參:params,query
params傳參的時候可以在路由配置的時候設置佔位符
query傳參就是標準的url傳參形式
如果我們想刷新頁面之後路由傳遞的參數還存在就必須使用query傳參或者params傳參的時候設置路由佔位符
路由守衛
beforeEach
afterEach
在路由守衛裏可以做登錄判斷?元屬性(meta)

12. vuex

*****
單項數據流
vuex中的數據流向(參照官網給的圖能說明)
vuex中主要的五大模塊(state,getters,actions,mutations,modules)
mapState
mapActions
mapMutations

13. vue 中的 mvvm 是怎麼實現的:

MVVM拆開來即爲Model-View-ViewModel,有View,ViewModel,Model三部分組成。View層代表的是視圖、模版,負責將數據模型轉化爲UI展現出來。Model層代表的是模型、數據,可以在Model層中定義數據修改和操作的業務邏輯。ViewModel層連接Model和View。
對數據(Model)進行劫持,當數據變動時,數據會出發劫持時綁定的方法,對視圖進行更新。

14. diff 算法:當數據發生改變時,set方法會讓調用Dep.notify通知所有訂閱者Watcher,訂閱者就會調用patch給真實的DOM打補丁,更新相應的視圖。

15. 虛擬dom:virtual DOM是將真實的DOM的數據抽取出來,以對象的形式模擬樹形結構

16. vue 中爲什麼不用 jQuery

17. vue 中怎麼操作 dom 元素(el,el,refs)

18. vue 中怎麼獲取父組件的內容($root)

19. vue 中父組件怎麼調用子組件的方法($refs 選中子組件,直接調用方法名)

20. 當頁面應用程序刷新之後怎麼保證數據還是存在的?你怎麼緩存頁面數據(sessionStorage,localStorage)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章