vue面試題整理vuejs基礎知識整理

初級參考

1.v-show 與 v-if 區別

v-show 是css隱藏，v-if是直接銷燬和建立，因此頻繁切換的適合用v-show

2.計算屬性和 watch 的區別

計算屬性是自動監聽依賴值的變化，從而動態返回內容，監聽是一個過程，在監聽的值變化時，能夠觸發一個回調，並作一些事情。

因此區別來源於用法，只是須要動態值，那就用計算屬性；須要知道值的改變後執行業務邏輯，才用 watch，用反或混用雖然可行，但都是不正確的用法。

說出一下區別會加分

computed 是一個對象時，它有哪些選項？

computed 和 methods 有什麼區別？

computed 是否能依賴其它組件的數據？

watch 是一個對象時，它有哪些選項？

有get和set兩個選項

methods是一個方法，它能夠接受參數，而computed不能，computed是能夠緩存的，methods不會。

computed能夠依賴其餘computed，甚至是其餘組件的data

watch 配置

handler

deep 是否深度

immeditate 是否當即執行

總結

當有一些數據須要隨着另一些數據變化時，建議使用computed。

當有一個通用的響應數據變化的時候，要執行一些業務邏輯或異步操做的時候建議使用watcher

3.事件修飾符

綁定一個原生的click事件， 加native，

其餘事件修飾符

stop（阻止事件冒泡） prevent（阻止默認事件）  self（只有本身觸發，子組件不會觸發）

組合鍵

click.ctrl.exact 只有ctrl被按下的時候才觸發

4.雙向綁定的原理

經過數據劫持和發佈訂閱模式方式實現的，核心的 API 是經過Object.defineProperty()來劫持各個屬性的setter / getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調，這也是爲何 Vue.js 2.x 不支持 IE8 的緣由。要實現雙向綁定，首先進行數據劫持，因此須要設置一個監聽器Observer，用來監聽全部屬性。若是屬性發生變化，就須要告訴訂閱者Watcher看是否須要更新。由於訂閱者不少，因此須要一個消息訂閱器Dep來專門收集這些訂閱者，而後在監聽器和訂閱者之間進行統一管理，最後須要一個指令解析器Compile，對每一個節點元素進行掃描和解析，將相關指令（v-model，v-on）對應初始化一個訂閱者Watcheer   ，並替換模板數據或綁定相應函數

官網解釋：https://cn.vuejs.org/v2/guide/reactivity.html

5.怎麼理解單項數據流

這是關於組件通信中父組件的prop傳遞給子組件，在子組件中不能更改prop，只能父組件更改prop，不然會報錯。子組件想修改時，只能經過 $emit 派發一個自定義事件，父組件接收到後，由父組件修改。

通常來講，對於子組件想要更改父組件狀態的場景，能夠有兩種方案：

在子組件的 data 中拷貝一份 prop，data 是能夠修改的，但 prop 不能：

exportdefault{props: {value:String},  data () {return{currentValue:this.value    }  }}複製代碼

若是是對 prop 值的轉換，可使用計算屬性：

exportdefault{props: ['size'],computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase();    }  }}

6.簡述vue的狀態管理並說明你在項目中哪些地方使用了

component經過mapactions或者dispatch將方法類型和負載傳給actions，actions接收到後進行業務處理經過commit將處理後的類型和負載傳給mutations，mutations不作業務處理，只根據接收的類型和負載將state中的數據進行突變，component經過mapgetters拿到更新後的倉庫數據。

在組件中用mapactions接管methods方法，用mapgetters接收computed計算屬性，這樣主要是爲了action更簡潔，便於後期迭代更新。如下經過官網例子進行加深理解：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7.簡述下生命週期鉤子

vue實例從建立到銷燬的過程，就是生命週期。從開始建立，初始化數據，編譯模板，掛載DOM，渲染，更新再渲染，最後到銷燬等一系列過程就是生命週期。

beforeCreate：數據觀測和初始化事件還沒開始

Created：完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒顯示出來

beforeMount：掛載前調用，相關的render第一次調用。實例已經完成編譯模板，data裏的數據和模板已經生成HTML，但沒有講HTML掛載到頁面上

Mounted：el被新建立的Vm.$el替換，並掛載到實例上面調用。實例已經完成如下配置：用上面編譯好的HTML內容替換el屬性指向DOM元素。完成模板中HTML渲染到HTML頁面中。此過程進行ajax交互。

beforeUpdate:發生在虛擬dom和打補丁以前，能夠在該鉤子中進一步修改狀態，不會觸發附加的衝渲染過程。

Updated：因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。

beforeDestroy（銷燬前） 在實例銷燬以前調用。實例仍然徹底可用。

destroyed（銷燬後） 在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

8.組件中如何通訊

九叔說要講半小時左右：。。。。

父到子：

傳<子組件 :自定義屬性=「父數據」>

收：子組件選項props：【‘自定義屬性’】

子到父：

父組件向子組件傳遞事件方法，子組件經過$emit觸發事件，回調給父組件

非父子，兄弟組件通信：

能夠經過實例一個vue實例Bus做爲媒介，要相互通訊的兄弟組件之中，都引入Bus，而後經過分別調用Bus事件觸發和監聽來實現通訊和參數傳遞。

組件通信更詳細解釋

9.路由守衛是什麼，有幾種方式

全局守衛，路由獨享守衛，組件內部守衛；

全局守衛：

router.beforeRouteEnter(to,from,next){前置守衛，進入}

router.beforeRouterLeave(to,from,next){後置守衛，離開}

to  目標路由  from   當前路由  

next函數：next() == next(true) 運行跳轉

   next(false) 不讓跳轉

   next('字符路徑')/next({對象路徑}) 重定向

路由獨享守衛：沒有後置守衛

{

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

組件內部守衛：

const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {  前置

    // 在渲染該組件的對應路由被 confirm 前調用

    // 不！能！獲取組件實例 `this`

    // 由於當守衛執行前，組件實例還沒被建立

  },

 

  beforeRouteLeave (to, from, next) { 後置

    // 導航離開該組件的對應路由時調用

    // 能夠訪問組件實例 `this`

  }

}

 

10.vue的優化

不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退

11.什麼是插槽或內容分發 ，插槽有幾種方式

組件內部保留槽位:

具名槽位:<slot name=槽名

匿名槽位: <slot></..>

調用組件插入內容:  內容 == dom | 組件

<組件名>

<template #槽名> 內容 | <組件名>

<template v-slot:槽名>內容

父級模板裏的全部內容都是在父級做用域中編譯的；子模板裏的全部內容都是在子做用域中編譯

12.簡述下mvvm和MVC

MVC：

 

 

1.View 傳送指令到 Controller

2.Controller 完成業務邏輯後，要求 Model 改變狀態

3.Model 將新的數據發送到 View，用戶獲得反饋

MVP：

 

 

1. 各部分之間的通訊，都是雙向的。

2. View 與 Model 不發生聯繫，都經過 Presenter 傳遞。

3. View 很是薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter很是厚，全部邏輯都部署在那裏。

MVVM：

 

 

和MVP很像，採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然

13.路由懶加載，異步路由，分片打包

原理: 把組件封裝到一個函數內部，路由激活時，調用該函數，函數內部 異步加載目標組件並返回

路由配置router.js:

a)

- import home from "../components/home.vue"

+ const home =()=>import("../components/home.vue");

{path:'/home', component: home }

b)

{path:xxx, component: r => { require(['./login/Login'], r) }}

 

15.vue的數據是響應式的，請問何時是非響應式的並如何解決

a:數組數據：

問題1：經過改變長度，利用索引直接設置跟項

解決：Vue.set(數組對象, key, value)                        |                vm|this.$set(數組對象, key, value)

問題2：對數組使用了非變異 (non-mutating method) 方法（返回的了新數組）

解決：對象合併

對象數據變化：

問題：問題：data:{a:1}；a 數據是響應式的；vm.b='qq';  b 屬性不是響應式的

解決：Vue.set(對象, key, value)                            |                            vm|this.$set(對象, key, value)

總結：數據一開始就應該出如今data裏，數組裏面永遠不要放置簡單性數據

16.如何編寫一個自定義指令

指令是個函數或者對象，用來操做dom，指令內部的this指向window；

a:全局指令  Vue.directive（指令名稱不帶v-,回調（el,bingding））

el:dom元素；binding是個對象，含有傳入的參數，binding。value

b:局部  定義在選項裏面

directives:{

指令名不帶v- : 函數(el,binding){}

}

17.如何自定義事件

定義：vm.$on( '自定義事件名'|['自定義事件名1','自定義事件名2'], 回調(參數) )

銷燬：vm.$off( '自定義事件名'|['自定義事件名1','自定義事件名2'], 回調(參數) )

觸發: vm.$emit(自定義事件名1,參數)

自定義事件名： 使用 kebab-case 的事件名

場景： 在一個組件實例上手動偵聽事件時

18.懶加載，按需加載，點擊加載，滑動加載

把組件加載封裝在一個函數中，路由激活的時候調用這個函數，這個函數在運行的時候去加載這個組件。加載用import或者requireAPI

19.如何更改計算屬性並響應式

計算屬性的set方法

 

 

 

 

 

 

20.vue的diff算法

忽然發現弄懂這個就不是初級了。。。

https://juejin.im/post/5c97002b6fb9a070aa5cf60b

做者：將心比心_59bf 連接：https://www.jianshu.com/p/875c9069dfc2 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。