前端面試題：VUE

1. vue的雙向數(shù)據(jù)綁定實現(xiàn)原理?

2. vue如何在組件之間進行傳值?

3. vuex和vue的雙向數(shù)據(jù)綁定有什么沖突？

4. vue-router中的history模式和hash模式的區(qū)別既忆？

5. 路由懶加載的作用

6. 對虛擬dom的了解，說說實現(xiàn)原理

6. 對虛擬dom的了解跃脊，說說實現(xiàn)原理

什么是虛擬DOM樹苛吱？（Virtual DOM）

virtual翠储，指的是對真實DOM的一種模擬。相對于直接操作真實的DOM結(jié)構(gòu)庐舟，我們構(gòu)建一棵虛擬的樹挪略，將各種數(shù)據(jù)和操作直接應(yīng)用在這棵虛擬的樹上滔岳，然后再將對虛擬的樹的修改應(yīng)用到真實的DOM結(jié)構(gòu)上澈蟆。
虛擬DOM樹其實就是一個普通的js對象趴俘，它是用來描述一段HTML片段的

當(dāng)頁面渲染的時候Vue會創(chuàng)建一顆虛擬DOM樹
當(dāng)頁面發(fā)生改變Vue會再創(chuàng)建一顆新的虛擬DOM樹
前后兩顆新舊虛擬DOM樹進行對比，Vue通過diff算法太惠，去記錄差異的地方
將有差異的地方更新到真實的DOM樹中

虛擬DOM樹有什么用凿渊？

vue中的虛擬DOM樹只會重新渲染頁面修改的地方埃脏，大大減少了對真實DOM樹的操作彩掐。 -------虛擬DOM樹是占內(nèi)容的堵幽，但是可以幫我們提高DOM的性能朴下。

可以這樣理解，虛擬DOM樹是用空間(虛擬DOM樹占空間)換時間(虛擬DOM樹可以提高DOM效率)麦撵。

Vue v-for 中 :key 到底有什么用免胃？

vue不直接操作真實的DOM樹惫撰，通過虛擬DOM樹就可以重新渲染修改的地方厨钻，影藏在背后的原理其實就是 diff 算法。
key的作用是為了高效的更新虛擬DOM樹诗充，提高查找的效率蝴蜓，一次性定位到要修改的元

5. 路由懶加載的作用

在單頁應(yīng)用中俺猿，如果沒有應(yīng)用懶加載，運用webpack打包后的文件將會異常的大诵冒，
造成進入首頁時汽馋，需要加載的內(nèi)容過多悄雅，延時過長告组，不利于用戶體驗木缝，
運用懶加載可以將頁面進行劃分我碟，按需加載頁面姚建，可以分擔(dān)首頁所承擔(dān)的加載壓力矫俺，減少加載用時。

常用的懶加載方式有兩種：即使用vue異步組件 和 ES中的import

// 原加載方式
 export default new Router({
    routes: [
       {
           path: '/',
           name: 'HelloWorld',
          component:HelloWorld
       }
     ]
 })
// vue異步組件實現(xiàn)懶加載
// 方法如下：component：resolve=>(require(['需要加載的路由的地址'])掸冤，resolve)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})
// ES 提出的import方法厘托，（------最常用------）
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

**擴展知識**:組件懶加載

// 原加載方式
import One from './one'
export default {
  components:{
    "One-com":One
  },
...
// const方法
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
...
// 異步方法
export default {
  components:{
    "One-com":resolve=>(['./one'],resolve)
  },

路由和組件的常用兩種懶加載方式：
1、vue異步組件實現(xiàn)路由懶加載
　　component：resolve=>(['需要加載的路由的地址'稿湿，resolve])
2铅匹、es提出的import(推薦使用這種方式)
　　const HelloWorld = （）=>import('需要加載的模塊地址')
參考連接：
https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html

4. vue-router中的history模式和hash模式的區(qū)別？

Vue-router 路由模式有三種 "hash" | "history" | "abstract"饺藤，一般人只知道兩種"hash" | "history"

// 源碼：

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}

mode

類型: string
默認值: "hash" (瀏覽器環(huán)境) | "abstract" (Node.js 環(huán)境)
可選值: "hash" | "history" | "abstract"

配置路由模式:

hash: 使用 URL hash 值來作路由瞻坝。支持所有瀏覽器浮入，包括不支持 HTML5 History Api 的瀏覽器溜族。
history: 依賴 HTML5 History API 和服務(wù)器配置。查看 HTML5 History 模式。
abstract: 支持所有 JavaScript 運行環(huán)境沐兰，如 Node.js 服務(wù)器端瓜浸。如果發(fā)現(xiàn)沒有瀏覽器的 API量窘，路由會自動強制進入這個模式.

對于Vue 這類漸進式前端開發(fā)框架锨侯，為了構(gòu)建SPA（單頁面應(yīng)用）审葬，需要引入前端路由系統(tǒng)，這也就是Vue-router存在的意義.

前端路由的核心生兆，就在于——— 改變視圖的同時不會向后端發(fā)出請求
瀏覽器對頁面的訪問是無狀態(tài)的昆汹，所以我們在切換不同的頁面時都會重新進行請求。實際運用vue和vue-router開發(fā)就會發(fā)現(xiàn)挤聘，在切換頁面時是沒有重新請求的，使用起來就好像頁面是有狀態(tài)的诚撵。其實是借助瀏覽器的History API來實現(xiàn)的辛燥，可以使頁面跳轉(zhuǎn)而不刷新徘六，頁面的狀態(tài)就維持在瀏覽器中了假残。

vue-router: hash

hash模式中url帶有#號，修改成history模式，url中的#自動就去除了。

hash模式背后的原理是onhashchange事件止潮，可以在window對象上監(jiān)聽這個事件：

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1)
}

hash模式下燃乍，僅hash符號之前的內(nèi)容會被包含在請求中,如 http://www.abc.com, 因此對于后端來說嘿辟，即使沒有做到對路由的全覆蓋堤舒，也不會返回404錯誤,因此改變hash不會重新加載頁面.

vue-router: history
隨著history api的到來某残，前端路由開始進化了，前面的hashchange环础，你只能改變#后面的url片段徐伐，而history api則給了前端完全的自由。
　history api可以分為兩大部分：切換和修改

切換歷史狀態(tài)

包括back季二、forward刻蚯、go三個方法充甚，對應(yīng)瀏覽器的前進技矮，后退樊零，跳轉(zhuǎn)操作劲适，有同學(xué)說了愕贡，(谷歌)瀏覽器只有前進和后退诫钓，沒有跳轉(zhuǎn)惧所，嗯顶岸，在前進后退上長按鼠標(biāo)，會出來所有當(dāng)前窗口的歷史記錄，從而可以跳轉(zhuǎn)：

history.go(-2);//后退兩次
history.go(2);//前進兩次
history.back(); //后退
hsitory.forward(); //前進

坑1：此處有一個開發(fā)的坑：在我們項目中寸爆，開發(fā)人員會在某個詳情頁面按鈕上綁定history.go(-1)用來進入詳情的主頁面，有時測試人員會直接輸入url進入詳情頁，這樣點擊按鈕就會出現(xiàn)問題挫剑，跳轉(zhuǎn)的就不是項目中的主頁面艾岂，就會是瀏覽器歷史記錄中的上一頁

修改歷史狀態(tài)
包括了pushState、replaceState兩個方法喇潘，這兩個方法接收三個參數(shù)：stateObj，title，url

history.pushState(stateObj食店，title渠退，url)
window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}

坑2：通過history api，我們丟掉了丑陋的#摧茴，但是它也有個毛病：不怕前進禾锤，不怕后退峭状，就怕刷新，f5幽钢，（如果后端沒有準(zhǔn)備的話）尼变，因為刷新是實實在在地去請求服務(wù)器的割按。在hash模式下院领，前端路由修改的是#中的信息，而瀏覽器請求時是不帶它玩的谈秫，所以沒有問題迄本。但是在history下，你可以自由的修改path寥袭，當(dāng)刷新時章姓，如果服務(wù)器中沒有相應(yīng)的響應(yīng)或者資源耕腾，會分分鐘刷出一個404來扫俺。

popstate實現(xiàn)history路由攔截苍苞，監(jiān)聽頁面返回事件
當(dāng)活動歷史記錄條目更改時，將觸發(fā)popstate事件

如果被激活的歷史記錄條目是通過對 history.pushState() 的調(diào)用創(chuàng)建的狼纬，或者受到對 history.replaceState() 的調(diào)用的影響羹呵，popstate事件的state屬性包含歷史條目的狀態(tài)對象的副本。
需要注意的是調(diào)用 history.pushState() 或 history.replaceState() 用來在瀏覽歷史中添加或修改記錄疗琉，不會觸發(fā)popstate事件冈欢；

只有在做出瀏覽器動作時，才會觸發(fā)該事件盈简，如用戶點擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()）
vue-router: abstract
abstract模式是使用一個不依賴于瀏覽器的瀏覽歷史虛擬管理后端凑耻。

根據(jù)平臺差異可以看出太示，在 Weex 環(huán)境中只支持使用 abstract 模式。不過香浩，vue-router 自身會對環(huán)境做校驗类缤，如果發(fā)現(xiàn)沒有瀏覽器的 API，vue-router 會自動強制進入 abstract 模式邻吭，所以在使用 vue-router 時只要不寫 mode 配置即可餐弱，默認會在瀏覽器環(huán)境中使用 hash 模式，在移動端原生環(huán)境中使用 abstract 模式

3. vuex和vue的雙向數(shù)據(jù)綁定有什么沖突囱晴？

在嚴(yán)格模式下vuex中的state對象中的屬性是不能隨意更改的膏蚓，但是在表單處理時使用v-model時綁定的是vuex的數(shù)據(jù)，用戶可以隨意更改數(shù)據(jù)時會拋出一個錯誤速缆。

解決辦法:
1.給 <input> 中綁定 value降允，然后偵聽 input 或者 change 事件，在事件回調(diào)中調(diào)用一個方法
2.使用帶有 setter 的雙向綁定計算屬性

2. vue如何在組件之間進行傳值?

父子組件之間的傳值
1.使用props和$emit
2.在引入的子組件中使用ref艺糜，通過this.$refs.xxx.方法/值來獲取子組件中的方法或者值
3.子組件中使用this.$parent來獲取父組件中的值或者方法
4.父組件中使用this.$children來獲取子組件中的值或者方法
??tip：方法3和方法4有時候會失效剧董，所以建議使用方法2
兄弟組件中的傳值
1.使用eventBus作為中間件，然后使用$emit去拋出事件破停，使用$on去監(jiān)聽事件
??這里要注意一些事項：

a. bus.$emit在beforeDestroy中去觸發(fā)

b. bus.$on 在 created或者mounted中使用翅楼，且回調(diào)函數(shù)使用箭頭函數(shù)，解決this指向問題

c. 在beforeDestroy中使用bus.$off去銷毀事件

d.比較特殊的是如果該組件存在緩存（路由跳轉(zhuǎn)的時候使用了<keep-alive>來包裹<router-view>,此時該組件跳轉(zhuǎn)的時候是不會觸發(fā)beforeDestroy和destroy真慢，該組件只會觸發(fā)created和mounted毅臊，但是它又離去的時候會觸發(fā)deactivated，返回的時候會觸發(fā)active黑界，此時就將`bus.$emit 寫在 deactivated 中）

tip：我在網(wǎng)上還看到如果是這種情況的話也可以將bus. $emit寫在$ nextTick里面去觸發(fā)管嬉，嘗試過，結(jié)果失敗朗鸠。這里只是當(dāng)做一個參考蚯撩。

多級組件嵌套傳值

使用 v-bind = " $attrs" v-on = "$ listeners"
詳情參考[點擊鏈接](http://www.reibang.com/p/26888cb10ce8 "點擊鏈接")
使用provide和inject

多個組件重復(fù)使用，整個項目都需要的

使用vuex

參考鏈接：https://www.cnblogs.com/lanhuo666/p/11273128.html

1. vue的雙向數(shù)據(jù)綁定實現(xiàn)原理?

vue2:
在vue2中源碼使用的defineProperty來實現(xiàn)雙向綁定烛占。
實際上defineProperty它的主要作用是用來給對象中的屬性配置操作權(quán)限胎挎，
例如：

  writable:false, // 屬性值是否可寫
  enumerable: false, // 屬性值是否可循環(huán)
  configurable: false //屬性值是否可以delete

其中get和set實現(xiàn)了響應(yīng)式原理。
數(shù)據(jù)改變之后觸發(fā)了set方法->set方法觸發(fā)更新和通知忆家，同時get方法收集依賴->然后更改對應(yīng)的虛擬dom->重新render.

缺點：

在這里defineProperty有一個不優(yōu)雅的地方是犹菇，要使用get&set 方法實現(xiàn)讀取的存儲，必須將屬性值重新賦值給新的變量芽卿，來實現(xiàn)存儲和中轉(zhuǎn)揭芍。
而且對數(shù)組需要單獨處理。
// 數(shù)組的雙向綁定就是做了一個設(shè)計者模式卸例；
// 取出數(shù)組的原型鏈并拷貝;
并且defineProperty只能監(jiān)聽對象的某個屬性沼沈，不能監(jiān)聽全對象流酬；需要通過for in 循環(huán)币厕。

vue3:
而在vue3中源碼使用了的proxy來實現(xiàn)雙向綁定原理列另。
proxy相對于defineProperty.

優(yōu)點：

proxy的get和set方法中直接可以返回參數(shù)target, key, value，可以直接獲取到變量旦装，不需要外部變量實現(xiàn)存儲和讀取页衙。
而且可以監(jiān)聽數(shù)組，不需要單獨的對數(shù)組進行特異性處理阴绢。
proxy對原對象進行代理店乐，生成新的代理對象，不會污染原對象呻袭。