Vue面試題

96
冰灘波紋
7.4 2019.02.21 16:00* 字數 3277

什么是 mvvm?

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表數據模型,也可以在 Model 中定義數據修改和操作的業務邏輯;View 代表 UI 組件,它負責將數據模型轉化成 UI 展現出來,ViewModel 是一個同步 View 和 Model 的對象。在 MVVM 架構下,View 和 Model 之間并沒有直接的聯系,而是通過 ViewModel 進行交互,Model 和 ViewModel 之間的交互是雙向的, 因此 View 數據的變化會同步到 Model 中,而 Model 數據的變化也會立即反應到 View 上。ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來,而 View 和 Model 之間的同步工作完全是自動的,無需人為干涉,因此開發者只需關注業務邏輯,不需要手動操作 DOM, 不需要關注數據狀態的同步問題,復雜的數據狀態維護完全由 MVVM 來統一管理。

mvvm 和 mvc 區別?

mvc 和 mvvm 其實區別并不大。都是一種設計思想。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel。mvvm 主要解決了 mvc 中大量的 DOM 操作使頁面渲染性能降低,加載速度變慢,影響用戶體驗。和當 Model 頻繁發生變化,開發者需要主動更新到 View 。

vue 的優點是什么?

  • 低耦合。視圖(View)可以獨立于 Model 變化和修改,一個 ViewModel 可以綁定到不同的"View"上,當 View 變化的時候 Model 可以不變,當 Model 變化的時候 View 也可以不變。
  • 可重用性。你可以把一些視圖邏輯放在一個 ViewModel 里面,讓很多 view 重用這段視圖邏輯。
  • 獨立開發。開發人員可以專注于業務邏輯和數據的開發(ViewModel),設計人員可以專注于頁面設計,使用 Expression Blend 可以很容易設計界面并生成 xml 代碼。
  • 可測試。界面素來是比較難于測試的,而現在測試可以針對 ViewModel 來寫。

vue生命周期的理解?

答:總共分為 8 個階段創建前/后,載入前/后,更新前/后,銷毀前/后。

  • 創建前/后: 在 beforeCreate 階段,vue 實例的掛載元素 el 還沒有。
  • 載入前/后:在 beforeMount 階段,vue 實例的$el 和 data 都初始化了,但還是掛載之前為虛擬的 dom 節點,data.message 還未替換。在 mounted 階段,vue 實例掛載完成,data.message 成功渲染。
  • 更新前/后:當 data 變化時,會觸發 beforeUpdate 和 updated 方法。
  • 銷毀前/后:在執行 destroy 方法后,對 data 的改變不會再觸發周期函數,說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定,但是 dom 結構依然存在。

為什么vue中data必須是一個函數?

對象為引用類型,當重用組件時,由于數據對象都指向同一個data對象,當在一個組件中修改data時,其他重用的組件中的data會同時被修改;而使用返回對象的函數,由于每次返回的都是一個新對象(Object的實例),引用地址不同,則不會出現這個問題。

組件之間的傳值?

1.父組件與子組件傳值

//父組件通過標簽上面定義傳值
<template>
    <Main :obj="data"></Main>
</template>
<script>
    //引入子組件
    import Main form "./main"

    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子組件傳遞數據"
            }
        },
        //初始化組件
        components:{
            Main
        }
    }
</script>


//子組件通過props方法接受數據
<template>
    <div>{{obj}}</div>
</template>
<script>
    exprot default{
        name:"son",
        //接受父組件傳值
        props:["obj"]
    }
</script>

2.子組件向父組件傳遞數據

//子組件通過$emit方法傳遞參數
<template>
   <div v-on:click="events"></div>
</template>
<script>
    //引入子組件
    import Main form "./main"

    exprot default{
        methods:{
            events:function(params){
              console.log(params)
            }
        }
    }
</script>


//

<template>
    <div v-on:click="emitEvent">{{data}}</div>
</template>
<script>
    exprot default{
        name:"son",
        //接受父組件傳值
        props:["data"],
        methods: {
          emitEvent() {
            this.$emit('event', params) // 派發函數,并傳遞值,params是你自己想傳的值
          }
        }
    }
</script>

active-class 是哪個組件的屬性?

vue-router 模塊的 router-link 組件。

嵌套路由怎么定義?

在實際項目中我們會碰到多層嵌套的組件組合而成,但是我們如何實現嵌套路由呢?因此我們需要在 VueRouter 的參數中使用 children 配置,這樣就可以很好的實現路由嵌套。index.html,只有一個路由出口

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>

main.js,路由的重定向,就會在頁面一加載的時候,就會將 home 組件顯示出來,因為重定向指向了 home 組件,redirect 的指向與 path 的必須一致。children 里面是子路由,當然子路由里面還可以繼續嵌套子路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入兩個組件

import home from "./home.vue"
import game from "./game.vue"
//定義路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home組件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//創建路由實例
const router = new VueRouter({routes})

new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})

home.vue,點擊顯示就會將子路由顯示在出來,子路由的出口必須在父路由里面,否則子路由無法顯示。

路由之間跳轉?

  • 聲明式(標簽跳轉)
  • 編程式( js 跳轉) router.push('index')

懶加載(按需加載路由)(常考)

webpack 中提供了 require.ensure()來實現按需加載。以前引入路由是通過 import 這樣的方式引入,改為 const 定義的方式進行引入。

  • 不進行頁面按需加載引入方式:import home from '../../common/home.vue'
  • 進行頁面按需加載的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

vuex 是什么?怎么使用?哪種功能場景使用它?

vue 框架中狀態管理。在 main.js 引入 store,注入。新建了一個目錄 store,….. export 。場景有:單頁應用中,組件之間的狀態。音樂播放、登錄狀態、加入購物車

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    //...code
})

//main.js
import store from './store'
...

vue-router 有哪幾種導航鉤子?

三種

  • 全局導航鉤子
    router.beforeEach(to, from, next),
    router.beforeResolve(to, from, next),
    router.afterEach(to, from ,next)
  • 組件內鉤子
    beforeRouteEnter,
    beforeRouteUpdate,
    beforeRouteLeave
  • 單獨路由獨享組件
    beforeEnter

自定義指令(v-check, v-focus) 的方法有哪些? 它有哪些鉤子函數? 還有哪些鉤子函數參數

  • 全局定義指令:在 vue 對象的 directive 方法里面有兩個參數, 一個是指令名稱, 另一個是函數。
  • 組件內定義指令:directives鉤子函數: bind(綁定事件出發)、inserted(節點插入時候觸發)、update(組件內相關更新)
  • 鉤子函數參數: el、binding

說出至少 4 種 vue 當中的指令和它的用法

v-if(判斷是否隱藏)、v-for(把數據遍歷出來)、v-bind(綁定屬性)、v-model(實現雙向綁定)

vue 的雙向綁定的原理是什么(常考)

vue.js 是采用數據劫持結合發布者-訂閱者模式的方式,通過 Object.defineProperty()來劫持各個屬性的 setter,getter,在數據變動時發布消息給訂閱者,觸發相應的監聽回調。
具體步驟:
第一步:需要 observe 的數據對象進行遞歸遍歷,包括子屬性對象的屬性,都加上 setter 和 getter 這樣的話,給這個對象的某個值賦值,就會觸發 setter,那么就能監聽到了數據變化
第二步:compile 解析模板指令,將模板中的變量替換成數據,然后初始化渲染頁面視圖,并將每個指令對應的節點綁定更新函數,添加監聽數據的訂閱者,一旦數據有變動,收到通知,更新視圖
第三步:Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁,主要做的事情是:
在自身實例化時往屬性訂閱器(dep)里面添加自己自身必須有一個 update()方法待屬性變動 dep.notice()通知時,能調用自身的 update() 方法,并觸發 Compile 中綁定的回調,則功成身退。
第四步:MVVM 作為數據綁定的入口,整合 Observer、Compile 和 Watcher 三者,通過 Observer 來監聽自己的 model 數據變化,通過 Compile 來解析編譯模板指令,最終利用 Watcher 搭起 Observer 和 Compile 之間的通信橋梁,達到數據變化 -> 視圖更新;視圖交互變化(input) -> 數據 model 變更的雙向綁定效果。

vuex 有哪幾種屬性

有 5 種,分別是 state、getter、mutation、action、module

vuex 的 store 特性是什么

vuex 就是一個倉庫,倉庫里放了很多對象。其中 state 就是數據源存放地,對應于一般 vue 對象里面的 datastate 里面存放的數據是響應式的,vue 組件從 store 讀取數據,若是 store 中的數據發生改變,依賴這相數據的組件也會發生更新它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性

vuex 的 getter 特性是什么

getter 可以對 state 進行計算操作,它就是 store 的計算屬性雖然在組件內也可以做計算屬性,但是 getters 可以在多給件之間復用如果一個狀態只在一個組件內使用,是可以不用 getters

vuex 的 mutation 特性是什么

action 類似于 muation, 不同在于:action 提交的是 mutation,而不是直接變更狀態action 可以包含任意異步操作

vue 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 action 中

如果請求來的數據不是要被其他組件公用,僅僅在請求的組件內使用,就不需要放入 vuex 的 state 里如果被其他地方復用,請將請求放入 action 里,方便復用,并包裝成 promise 返回

不用 vuex 會帶來什么問題

  • 可維護性會下降,你要修改數據,你得維護 3 個地方
  • 可讀性下降,因為一個組件里的數據,你根本就看不出來是從哪里來的
  • 增加耦合,大量的上傳派發,會讓耦合性大大的增加,本來 Vue 用 Component 就是為了減少耦合,現在這么用,和組件化的初衷相背

vuex 原理

vuex 僅僅是作為 vue 的一個插件而存在,不像 Redux,MobX 等庫可以應用于所有框架,vuex 只能使用在 vue 上,很大的程度是因為其高度依賴于 vue 的 computed 依賴檢測系統以及其插件系統,vuex 整體思想誕生于 flux,可其的實現方式完完全全的使用了 vue 自身的響應式設計,依賴監聽、依賴收集都屬于 vue 對對象 Property set get 方法的代理劫持。最后一句話結束 vuex 工作原理,vuex 中的 store 本質就是沒有 template 的隱藏著的 vue 組件;

使用 Vuex 只需執行 Vue.use(Vuex),并在 Vue 的配置中傳入一個 store 對象的示例,store 是如何實現注入的?美團

Vue.use(Vuex) 方法執行的是 install 方法,它實現了 Vue 實例對象的 init 方法封裝和注入,使傳入的 store 對象被設置到 Vue 上下文環境的store中。因此在VueComponent任意地方都能夠通過this.store 訪問到該 store。

state 內部支持模塊配置和模塊嵌套,如何實現的?美團

在 store 構造方法中有 makeLocalContext 方法,所有 module 都會有一個 local context,根據配置時的 path 進行匹配。所以執行如 dispatch('submitOrder', payload)這類 action 時,默認的拿到都是 module 的 local state,如果要訪問最外層或者是其他 module 的 state,只能從 rootState 按照 path 路徑逐步進行訪問。

在執行 dispatch 觸發 action(commit 同理)的時候,只需傳入(type, payload),action 執行函數中第一個參數 store 從哪里獲取的?美團

store 初始化時,所有配置的 action 和 mutation 以及 getters 均被封裝過。在執行如 dispatch('submitOrder', payload)的時候,actions 中 type 為 submitOrder 的所有處理方法都是被封裝后的,其第一個參數為當前的 store 對象,所以能夠獲取到 { dispatch, commit, state, rootState } 等數據。

Vuex 如何區分 state 是外部直接修改,還是通過 mutation 方法修改的?美團

Vuex 中修改 state 的唯一渠道就是執行 commit('xx', payload) 方法,其底層通過執行 this._withCommit(fn) 設置_committing 標志變量為 true,然后才能修改 state,修改完畢還需要還原_committing 變量。外部修改雖然能夠直接修改 state,但是并沒有修改_committing 標志位,所以只要 watch 一下 state,state change 時判斷是否_committing 值為 true,即可判斷修改的合法性。

調試時的"時空穿梭"功能是如何實現的?美團

devtoolPlugin 中提供了此功能。因為 dev 模式下所有的 state change 都會被記錄下來,'時空穿梭' 功能其實就是將當前的 state 替換為記錄中某個時刻的 state 狀態,利用 store.replaceState(targetState) 方法將執行 this._vm.state = state 實現。

Vue
Gupao
四川金7乐昨日开奖结果