本篇內(nèi)容主要講解“vue的前端基礎(chǔ)面試題有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue的前端基礎(chǔ)面試題有哪些”吧!

10多年的伊州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整伊州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“伊州網(wǎng)站設(shè)計(jì)”,“伊州網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

vue 傳值方式

vue傳值

• 父  子 傳值   使用props接受

• 子 父 傳值    父親寫(xiě)事件函數(shù)  子 $emit觸發(fā) 傳值

• 兄弟傳值  $bus 中轉(zhuǎn)站

• 如果組件之間 關(guān)系很遠(yuǎn) 是很多組件都要用的值  vuex

• provide, inject注入方式

vuex  就是一個(gè)全局狀態(tài)數(shù)據(jù)管理簡(jiǎn)單來(lái)說(shuō) 他的數(shù)據(jù)類(lèi)似全局變量 哪個(gè)組件都可以使用

在項(xiàng)目中使用vuex

1、下載 vuex 包 并導(dǎo)入 use一下

import Vuex from 'vuex'
Vue.use(Vuex)

2、需要new 一下 寫(xiě)上全局?jǐn)?shù)據(jù)

// store
new Vuex.Store({
state: {
count:1 //這個(gè)count 就是全局的數(shù)據(jù)
},
mutations: {
},
actions: {
}
})

3、需要掛載到new  vue上

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

這個(gè)步驟是寫(xiě)死的  你可以記一下 下載使用腳手架直接就可以選vuex

他的使用邏輯是什么？

在 store里面的   state  寫(xiě)的數(shù)據(jù)  是全局?jǐn)?shù)據(jù)  所有組件都可以使用

使用邏輯

操作全局vuex的 state數(shù)據(jù)

正常情況  必須  dispatch (action)--->action去commit觸發(fā) mutation--》mutation里面才能修改state全局?jǐn)?shù)據(jù)

action--->mutation--->修改state

其他情況 你也可以跳過(guò) action  去  直接 commit mutation--》修改state全局?jǐn)?shù)據(jù)

vuex怎么合理規(guī)范管理數(shù)據(jù),及mutations和actions區(qū)別

解析: 此題考查 vuex中數(shù)據(jù)的管理和數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì),還有mutations 和actions的區(qū)別

**解答** : 首先要明確一個(gè)特別重要的原則, 就是 不是所有的數(shù)據(jù)都要放在vuex中, 因?yàn)関uex有一句名言:假如你并不知道為什么要使用vuex,那就不要使用它 !

那么什么樣式的數(shù)據(jù)需要放在vuex中呢 ? 首先這個(gè)數(shù)據(jù)肯定要被多個(gè)組件頻繁用到, 如果只是被一個(gè)組件 用到, 那完全沒(méi)有任何必要為了使用vuex和使用vuex

舉例:  一個(gè)網(wǎng)站用戶的昵稱(chēng),賬號(hào),資料,像這種系統(tǒng)級(jí)別的信息 隨時(shí)可能在業(yè)務(wù)中展示,使用, 如果在組件中存儲(chǔ), 那么要獲取N次, 所以**系統(tǒng)級(jí)別的數(shù)據(jù)**是需要放置在vuex中的, 那么系統(tǒng)級(jí)別數(shù)據(jù) 也不能所以的放置,為了讓數(shù)據(jù)看著更有層級(jí)結(jié)構(gòu)感,可以按照像下面這樣設(shè)計(jì),

{
 // 系統(tǒng)消息
 system: {
     user: {},
     setting: {}
 }
}

上面這種結(jié)構(gòu),一看 便知道我們應(yīng)該哪里獲取系統(tǒng)數(shù)據(jù)即 設(shè)置數(shù)據(jù)

如果有些業(yè)務(wù)數(shù)據(jù),也需要共享,最好按照模塊的具體業(yè)務(wù)含義分類(lèi) , 比如下面

{
    // 系統(tǒng)消息
    system: {
        user: {},
        setting: {}
    },
    product: {
        productList: [], // 商品信息列表
        productOrders: [] // 商品訂單啊列表
    }
}

如上圖代碼所示,我們很清晰的能夠分清楚 每個(gè)模塊的數(shù)據(jù),這樣不會(huì)導(dǎo)致數(shù)據(jù)管理的混亂

mutations和 actions 的區(qū)別

不同于redux只有一個(gè)action, vuex單獨(dú)拎出了一個(gè)mutations,  它認(rèn)為 更新數(shù)據(jù)必須是同步的, 也就是只要調(diào)用了 提交數(shù)據(jù)方法, 在mutation里面才可以修改數(shù)據(jù)

那么如果我們想做 異步請(qǐng)求,怎么做?  這里 vuex提供了專(zhuān)門(mén)做異步請(qǐng)求的模塊,action, 當(dāng)然action中也可以做同步操作, 只不過(guò) 分工更加明確, 所有的數(shù)據(jù)操作 不論是同步還是異步 都可以在action中完成,

mutation只負(fù)責(zé)接收狀態(tài), 同步完成 **數(shù)據(jù)快照**

所以可以認(rèn)為

state => 負(fù)責(zé)存儲(chǔ)狀態(tài)

mutations => 負(fù)責(zé)同步更新?tīng)顟B(tài)

actions => 負(fù)責(zé)獲取 處理數(shù)據(jù)（如果有異步操作必須在action處理 再到mutation）, 提交到mutation進(jìn)行狀態(tài)更新

vuex模塊化module管理,使用的時(shí)候有注意事項(xiàng)

分析: 此題考查 當(dāng)vuex維護(hù)的數(shù)據(jù)越來(lái)越復(fù)雜的時(shí)候, 模塊化的解決方案

**解析**:使用單一的狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)都會(huì)**集中在一個(gè)比較大的對(duì)象**上面，隨著項(xiàng)目需求的不斷增加，狀態(tài)樹(shù)也會(huì)變得越來(lái)越臃腫，增加了狀態(tài)樹(shù)維護(hù)的復(fù)雜度,而且代碼變得沉長(zhǎng)；因此我們需要**modules(模塊化)**來(lái)為我們的狀態(tài)樹(shù)**分隔**成不同的模塊，每個(gè)模塊擁有自己的state，getters，mutations，actions；而且允許每個(gè)module里面嵌套子module；如下：

 store
    ├── index.js          # 我們組裝模塊并導(dǎo)出 store 的地方
    ├── actions.js        # 根級(jí)別的 action
    ├── mutations.js      # 根級(jí)別的 mutation
    ├── state.js          # 根級(jí)別的 state
    └── modules
        ├── module1.js   # 模塊1的state樹(shù)
        └── module2.js   # 模塊2的state樹(shù)

上面的設(shè)計(jì)中, 每個(gè)vuex子模塊都可以定義 state/mutations/actions

需要注意的是  我們?cè)瓉?lái)使用**vuex輔助函數(shù)**  mapMutations/mapActions  引入的是 全局的的mutations 和actions , 并且我們vuex子模塊  也就是module1,module2 ... 這些模塊的aciton /mutation 也注冊(cè)了全局,

也就是如果 module1 中定義了 loginMutation, module2中也定義了 loginMutation, 此時(shí), mutation就沖突了

如果重名,就報(bào)錯(cuò)了.....

如果不想沖突, 各個(gè)模塊管理自己的action 和 mutation ,需要 給我們的子模塊一個(gè) 屬性 **namespaced: true**

那么 組件中怎么使用子模塊的action 和 mutations

// 你可以將模塊的空間名稱(chēng)字符串作為第一個(gè)參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會(huì)自動(dòng)將該模塊作為上下文
 methods:{
     ...mapMutations('m1', ['loginMutation']),
     add(){
       console.log('add',this)
      //  this.$store.commit("m1/loginMutation")
      // 或者下面的  先mapMutations 相當(dāng)于幫你寫(xiě)了commit
      // this.loginMutation()
     }
  }

     // 這句話的意思是 直接 解構(gòu)出 全局 m1模塊下的 loginMutation 
    // 把loginMutation 放到this上 并且?guī)湍銓?xiě)好了 commit
    // 相當(dāng)于幫你簡(jiǎn)化了代碼
     ...mapMutations('m1', ['loginMutation']),
       //不是modules的直接寫(xiě)  ...mapMutations( ['loginMutaton])

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 1 下載vuex 導(dǎo)入 use一下
// 2 new Vuex.Store
// 3 掛載到new  vue上
export default new Vuex.Store({
  state: {
    // 在這里寫(xiě)的就是所有組件都能有 全局?jǐn)?shù)據(jù)了
    // 名字:值
    // 如果我1000個(gè)全局?jǐn)?shù)據(jù) 有可能重名
    count:100
  },
  mutations: {
    countMutation(state){
      // state 就是那個(gè)全局state
      console.log('mutation觸發(fā)了',state)
      state.count++
    }
  },
  actions: {
    // action對(duì)應(yīng)的函數(shù)
    countAction(obj){
      console.log('action觸發(fā)了',obj)
      // obj對(duì)象 里面有commit
      obj.commit("countMutation")
    }
  },
  // modules 在store全局?jǐn)?shù)據(jù) 是可以來(lái)分模塊管理的
  // 他可以用來(lái)區(qū)分每個(gè)不同模塊的數(shù)據(jù)
  // 15:10 上課
  modules: {
    // 模塊:{  一套state action mutation }
    m1: {
      namespaced: true,//開(kāi)啟命名空間大白話 他是m1下的 不會(huì)影響其他人

      // 模塊內(nèi)容（module assets）
      state: { // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響
        m1Name:"我是m1模塊的m1Name"
      }, 
      actions: {
        loginAction () { 
            console.log('m1的action')
        } // -> dispatch('m1/loginAction')
      },
      mutations: {
        loginMutation () { 
          console.log('loginMutation-執(zhí)行啦')
        } // -> commit('m1/loginMutation')
      }
    },
    home:{
        namespaced: true,
        state:{
          count:1
        }
    },
    about:{
      namespaced: true,
        state:{
          count:100
        },
        actions:{

        }
       
    },
    
  }
})

此題具體考查 Vuex雖然是一個(gè)公共狀態(tài), 但是公共狀態(tài)還可以切分成若干個(gè)子狀態(tài)模塊, 也就是moduels,

解決當(dāng)我們的狀態(tài)樹(shù)過(guò)于龐大和復(fù)雜時(shí)的一種解決方案.  但是筆者認(rèn)為, 一旦用了vuex, 幾乎 就認(rèn)定該項(xiàng)目是較為復(fù)雜的

參考文檔

https://vuex.vuejs.org/zh/guide/modules.html

封裝Vue組件的步驟

組件是什么？組件是一段功能代碼  ---大白話 就是一段html +js +css   你可以重復(fù)使用

封裝輪播圖 -  1 新建vue組件 2 Vue.component注冊(cè)組件 3  在其他組件使用 標(biāo)簽名

參數(shù)： 可以傳入數(shù)據(jù) 使用props接受 比如 數(shù)組 定時(shí)器時(shí)間等

分析: 本題考查 對(duì)于Vue組件化開(kāi)發(fā)的熟練程度

解析: 首先明確 組件是本質(zhì)是什么?

組件就是一個(gè)單位的HTML結(jié)構(gòu) + 數(shù)據(jù)邏輯 + 樣式的 操作單元

Vue的組件 繼承自Vue對(duì)象, Vue對(duì)象中的所有的屬性和方法,組件可自動(dòng)繼承.

• 組件的要素  template  =>  作為頁(yè)面的模板結(jié)構(gòu)

• script  => 作為數(shù)據(jù)及邏輯的部分

• style  => 作為該組件部分的樣式部分

要封裝一個(gè)組件,首先要明確該組件要做的具體業(yè)務(wù)和需求,  什么樣的體驗(yàn)特征, 完成什么樣的交互, 處理什么樣的數(shù)據(jù)

明確上述要求之后, 著手模板的結(jié)構(gòu)設(shè)計(jì)及搭建,也就是 常說(shuō)的html結(jié)構(gòu)部分,  先完成 靜態(tài)的html結(jié)構(gòu)

結(jié)構(gòu)完成, 著手?jǐn)?shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)及開(kāi)發(fā), 數(shù)據(jù)結(jié)構(gòu)一般存儲(chǔ)于組件的data屬性 或者 vuex 狀態(tài)共享的數(shù)據(jù)結(jié)構(gòu)

數(shù)據(jù)設(shè)計(jì)完成/ 結(jié)構(gòu)完成  接下來(lái) 完成數(shù)據(jù)和模塊的結(jié)合 , 利用vuejs中指令和 插值表達(dá)式的特性 將靜態(tài)結(jié)構(gòu) **動(dòng)態(tài)化**

展現(xiàn)的部分完成, 接下來(lái)完成**交互部分**,即利用 組件的生命周期的鉤子函數(shù) 和 事件驅(qū)動(dòng) 來(lái)完成 邏輯及數(shù)據(jù)的處理與操作

最后組件完成,進(jìn)行測(cè)試及使用

常用的組件屬性 => data/ methods/filters/ components/watch/created/mounted/beforeDestroy/computed/props

常用組件指令: v-if/v-on/v-bind/v-model/v-text/v-once

Vue中的data是以函數(shù)的形式還是對(duì)象的形式表示

分析: 此題考查 data的存在形式 解析: 我們?cè)诔醪綄W(xué)習(xí)Vue實(shí)例化的時(shí)候?qū)懙拇a時(shí)這個(gè)樣子上面代碼中的data 是一個(gè)對(duì)象, 但是我們?cè)陂_(kāi)發(fā)組件的時(shí)候要求data必須是一個(gè)帶返回值的函數(shù)

new Vue({
    el: '#app',
    data: {
        name: 'hello world'
    }
})

export default {
    data () {
        return {
            name: '張三'
        }
    }
}

為什么組件要求必須是帶返回值的函數(shù)?  因?yàn)?我們的組件在實(shí)例化的時(shí)候, 會(huì)直接將data數(shù)據(jù)作用在視圖上,對(duì)組件實(shí)例化, 會(huì)導(dǎo)致我們組件的data數(shù)據(jù)進(jìn)行共享

好比  現(xiàn)在有兩輛新車(chē), 你一踩油門(mén), 不光你的車(chē)往前車(chē),另輛車(chē)也和你一樣往前沖!

這顯然不符合我們的程序設(shè)計(jì)要求, 我們希望組件內(nèi)部的數(shù)據(jù)是相互獨(dú)立的,且互不響應(yīng)，所以 采用   return {}  每個(gè)組件實(shí)例都返回新對(duì)象實(shí)例的形式，保證每個(gè)組件實(shí)例的唯一性

到此，相信大家對(duì)“vue的前端基礎(chǔ)面試題有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！