query string parameter前端怎麼傳參_前端面試題 -- Vue

前言

毫無疑問，前端開發将會是2020年技術領域最火熱的專業至一

在入門學習前端的過程中你遇到的任何技術，行業之間的問題，你都可以加入我的學習交流裙。

前面++++++545++++++

中間++++++667++++++

後面++++++817++++++

或者點選此處即可添加。

作為前端開發中現行最火的架構之一，

Vue

在面試中出現的頻率不斷增加。基于此，總結了一些

Vue

方面經常出現的面試題，留給自己檢視消化，也分享給有需要的小夥伴

感興趣的小夥伴也可以點選 這裡，檢視前端方面的其他面試題，歡迎

star

關注

如果文章中有出現纰漏、錯誤之處，還請看到的小夥伴留言指正，先行謝過

以下 ↓

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

特點：

1. View

   傳送指令到

   Controller

2. Controller

   完成業務邏輯後，要求

   Model

   改變狀态

3. Model

   将新的資料發送到

   View

   ，使用者得到回報

所有通信都是單向的

MVVM

特點：

1. 各部分之間的通信，都是雙向的
2. 采用雙向綁定：

   View

   的變動，自動反映在

   ViewModel

   ，反之亦然

具體請移步 這裡

5. 介紹虛拟DOM

參考這裡

6. vue生命周期的了解

vue執行個體有一個完整的生命周期，生命周期也就是指一個執行個體從開始建立到銷毀的這個過程

• beforeCreate()

  在執行個體建立之間執行，資料未加載狀态

• created()

  在執行個體建立、資料加載後，能初始化資料，

  dom

  渲染之前執行

• beforeMount()

  虛拟

  dom

  已建立完成，在資料渲染前最後一次更改資料

• mounted()

  頁面、資料渲染完成，真實

  dom

  挂載完成

• beforeUpadate()

  重新渲染之前觸發

• updated()

  資料已經更改完成，

  dom

  也重新

  render

  完成,更改資料會陷入死循環

• beforeDestory()

  和

  destoryed()

  前者是銷毀前執行（執行個體仍然完全可用），後者則是銷毀後執行

7. 元件通信

父元件向子元件通信

子元件通過

props

屬性，綁定父元件資料，實作雙方通信

子元件向父元件通信

将父元件的事件在子元件中通過

$emit

觸發

非父子元件、兄弟元件之間的資料傳遞

let

event =

new

Vue();event.$on('eventName', (val) => { //......do something});event.$emit('eventName',

'this is a message.')

Vuex 資料管理

8. vue-router 路由實作

路由就是用來跟後端伺服器進行互動的一種方式，通過不同的路徑，來請求不同的資源，請求不同的頁面是路由的其中一種功能

參考 這裡

9. v-if 和 v-show 差別

使用了

v-if

的時候，如果值為

false

，那麼頁面将不會有這個

html

标簽生成。

v-show

則是不管值為

true

還是

false

，

html

元素都會存在，隻是

CSS

中的

display

顯示或隐藏

10. $route和$router的差別

$router

為

VueRouter

執行個體，想要導航到不同

URL

，則使用

$router.push

方法

$route

為目前

router

跳轉對象裡面可以擷取

name

、

path

、

query

、

params

等

11. NextTick 是做什麼的

$nextTick

是在下次

DOM

更新循環結束之後執行延遲回調，在修改資料之後使用

$nextTick

，則可以在回調中擷取更新後的

DOM

具體可參考官方文檔 深入響應式原理

12. Vue 元件 data 為什麼必須是函數

因為js本身的特性帶來的，如果

data

是一個對象，那麼由于對象本身屬于引用類型，當我們修改其中的一個屬性時，會影響到所有Vue執行個體的資料。如果将

data

作為一個函數傳回一個對象，那麼每一個執行個體的

data

屬性都是獨立的，不會互相影響了

13. 計算屬性computed 和事件 methods 有什麼差別

我們可以将同一函數定義為一個

method

或者一個計算屬性。對于最終的結果，兩種方式是相同的

不同點：

computed: 計算屬性是基于它們的依賴進行緩存的,隻有在它的相關依賴發生改變時才會重新求值對于

method

，隻要發生重新渲染，

method

調用總會執行該函數

14. 對比 jQuery ，Vue 有什麼不同

jQuery 專注視圖層，通過操作 DOM 去實作頁面的一些邏輯渲染； Vue 專注于資料層，通過資料的雙向綁定，最終表現在 DOM 層面，減少了 DOM 操作Vue 使用了元件化思想，使得項目子集職責清晰，提高了開發效率，友善重複利用，便于協同開發

15. Vue 中怎麼自定義指令

全局注冊

// 注冊一個全局自定義指令 `v-focus`Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時……

inserted:

function

(el)

{ // 聚焦元素

el.focus() } })

局部注冊

directives: { focus: { // 指令的定義

inserted:

function

(el)

{ el.focus() } } }

參考 官方文檔-自定義指令

16. Vue 中怎麼自定義過濾器

可以用全局方法

Vue.filter()

注冊一個自定義過濾器，它接收兩個參數：過濾器

ID

和過濾器函數。過濾器函數以值為參數，傳回轉換後的值

Vue.filter('reverse',

function

(value)

{

return

value.split('').reverse().join('') })<!-- 'abc' => 'cba' --><span

v-text="message | reverse"></span>

過濾器也同樣接受全局注冊和局部注冊

17. 對 keep-alive 的了解

keep-alive

是

Vue

内置的一個元件，可以使被包含的元件保留狀态，或避免重新渲染

<keep-alive>

<component>

<!-- 該元件将被緩存！ -->

</component></keep-alive>

可以使用API提供的props，實作元件的動态緩存

具體參考 官方API

18. Vue 中 key 的作用

key

的特殊屬性主要用在

Vue

的虛拟

DOM

算法，在新舊

nodes

對比時辨識

VNodes

。如果不使用

key

，

Vue

會使用一種最大限度減少動态元素并且盡可能的嘗試修複/再利用相同類型元素的算法。使用

key

，它會基于

key

的變化重新排列元素順序，并且會移除

key

不存在的元素。有相同父元素的子元素必須有獨特的

key

。重複的

key

會造成渲染錯誤

具體參考 官方API

19. Vue 的核心是什麼

資料驅動 元件系統

20. vue 等單頁面應用的優缺點

優點：

• 良好的互動體驗
• 良好的前後端工作分離模式
• 減輕伺服器壓力

缺點：

• SEO難度較高
• 前進、後退管理
• 初次加載耗時多

21. vue-router 使用params與query傳參有什麼差別

vue-router

可以通過

params

與

query

進行傳參

// 傳遞

this

.$router.push({path:

'./xxx',

params: {xx:xxx}})

this

.$router.push({path:

'./xxx',

query: {xx:xxx}})// 接收

this

.$route.params

this

.$route.query

• params

  是路由的一部分,必須要有。

  query

  是拼接在

  url

  後面的參數，沒有也沒關系

• params

  不設定的時候，重新整理頁面或者傳回參數會丢，

  query

  則不會有這個問題

原文作者：遊蕩de蝌蚪

原文出處：segmentfault

原文連結： https:// segmentfault.com/a/1190 000018634744