vue的前端基礎面試題有哪些

本篇內容主要講解“vue的前端基礎面試題有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue的前端基礎面試題有哪些”吧!

vue 傳值方式

vue傳值

• 父  子 傳值   使用props接受

• 子 父 傳值    父親寫事件函數  子 $emit觸發 傳值

• 兄弟傳值  $bus 中轉站

• 如果組件之間 關系很遠 是很多組件都要用的值  vuex

• provide, inject注入方式

vuex   就是一個全局狀態數據管理 簡單來說 他的數據類似全局變量 哪個組件都可以使用

在項目中使用vuex

1、下載 vuex 包 并導入 use一下

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

2、需要new 一下 寫上全局數據

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

3、需要掛載到new  vue上

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

<template>
  <div class="home">
     <!-- home啊
     <hr>
     {{$store.state.m1.m1Name}}
    <button @click="add">點擊</button> -->

    <!-- <hr> -->
    <!-- <my-swiper :list="list"></my-swiper> -->

    <button @click="getAll">發送請求</button>

    home組件啊
    <hr>
    <h2>count的值:{{$store.state.count}}</h2>
    <button @click="addCount">讓全局count+1</button>
    <hr>
    <h3>m1下的全局數據 {{$store.state.m1.m1Name}} </h3>
     <button @click="add">點擊修改某個模塊的數據</button>

     <!-- 3 哪個組件要用 就直接 使用注冊的組件標簽名 -->
     <hr>
     <!-- 用組件 傳了list數據進去 -->
     <my-swiper :list="list"></my-swiper>
     
  </div>
</template>


<script>
// 要在組件使用全局數據 
// 1 在html范圍 直接 $store.state.名字
// 2 在js范圍  this.$store.state.名字

// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {  mapMutations , mapActions ,mapState } from 'vuex'
export default {
  name: 'Home',
  components: {
    // HelloWorld
  },
  data(){
    return {
      list:[
             {id:1,src:'http://122.51.238.153/images/1.jpg'},
             {id:2,src:'http://122.51.238.153/images/2.jpg'},
             {id:3,src:'http://122.51.238.153/images/3.jpg'},
             {id:4,src:'http://122.51.238.153/images/4.jpg'}
           ]
    }
  },
  created(){
    console.log('created')
    console.log('store',this.$store)
  },
  mounted(){
    console.log("home 的 mounted")
  },
  methods:{
    // 這句話的意思是 直接 解構出 全局 m1模塊下的 loginMutation 
    // 把loginMutation 放到this上 并且幫你寫好了 commit
    // 相當于幫你簡化了代碼
     ...mapMutations('m1', ['loginMutation']),
    //不是modules的直接寫  ...mapMutations( ['loginMutation'])
     add(){
      //  console.log('add',this)
      //   console.log('add',this.$route.meta)
      //  this.$store.commit("m1/loginMutation")
      // 或者下面的  先mapMutations 相當于幫你寫了commit
      this.loginMutation()
      // this.$store.commit("m1/loginMutation")
      // 和剛剛的思路 就是加上一個模塊前綴 m1/ 
      // this.$store.dispatch("m1/loginAction")
     },
     async getAll(){
      //  http://localhost:8080/
      // 請求 http://122.51.238.153/getok.php
      //  let res=await this.$http.get("http://122.51.238.153/getok.php")
      //  console.log('res',res)
      let res=await this.$http.get("/api/getok.php")
      console.log('res',res)
     },
     addCount(){
        //  讓全局數據count+1
        // 1 正常情況 
        // dispatch 觸發action
        // -》commit觸發mutation
        // -》在mutation修改全局數據
        //2 其他情況 可以直接跳過action 但是必須mutation修改
        // console.log('$store',this.$store)
        // this.$store.dispatch( 'countAction' )
        this.$store.commit("countMutation")
      }
  }
}
</script>

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

他的使用邏輯是什么？

在 store里面的   state  寫的數據  是全局數據  所有組件都可以使用

使用邏輯

操作全局vuex的 state數據

正常情況  必須  dispatch (action)--->action去commit觸發 mutation--》mutation里面才能修改state全局數據

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

其他情況 你也可以跳過 action  去  直接 commit mutation--》修改state全局數據

vuex怎么合理規范管理數據,及mutations和actions區別

解析: 此題考查 vuex中數據的管理和數據結構的設計,還有mutations 和actions的區別

**解答** : 首先要明確一個特別重要的原則, 就是 不是所有的數據都要放在vuex中, 因為vuex有一句名言:假如你并不知道為什么要使用vuex,那就不要使用它 !

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

舉例:  一個網站用戶的昵稱,賬號,資料,像這種系統級別的信息 隨時可能在業務中展示,使用, 如果在組件中存儲, 那么要獲取N次, 所以**系統級別的數據**是需要放置在vuex中的, 那么系統級別數據 也不能所以的放置,為了讓數據看著更有層級結構感,可以按照像下面這樣設計,

{
 // 系統消息
 system: {
     user: {},
     setting: {}
 }
}

上面這種結構,一看 便知道我們應該哪里獲取系統數據即 設置數據

如果有些業務數據,也需要共享,最好按照模塊的具體業務含義分類 , 比如下面

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

如上圖代碼所示,我們很清晰的能夠分清楚 每個模塊的數據,這樣不會導致數據管理的混亂

mutations和 actions 的區別

不同于redux只有一個action, vuex單獨拎出了一個mutations,  它認為 更新數據必須是同步的, 也就是只要調用了 提交數據方法, 在mutation里面才可以修改數據

那么如果我們想做 異步請求,怎么做?  這里 vuex提供了專門做異步請求的模塊,action, 當然action中也可以做同步操作, 只不過 分工更加明確, 所有的數據操作 不論是同步還是異步 都可以在action中完成,

mutation只負責接收狀態, 同步完成 **數據快照**

所以可以認為

state => 負責存儲狀態

mutations => 負責同步更新狀態

actions => 負責獲取 處理數據（如果有異步操作必須在action處理 再到mutation）, 提交到mutation進行狀態更新

vuex模塊化module管理,使用的時候有注意事項

分析: 此題考查 當vuex維護的數據越來越復雜的時候, 模塊化的解決方案

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

 store
    ├── index.js          # 我們組裝模塊并導出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    ├── state.js          # 根級別的 state
    └── modules
        ├── module1.js   # 模塊1的state樹
        └── module2.js   # 模塊2的state樹

上面的設計中, 每個vuex子模塊都可以定義 state/mutations/actions

需要注意的是  我們原來使用**vuex輔助函數**  mapMutations/mapActions  引入的是 全局的的mutations 和actions , 并且我們vuex子模塊  也就是module1,module2 ... 這些模塊的aciton /mutation 也注冊了全局,

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

如果重名,就報錯了.....

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

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

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

     // 這句話的意思是 直接 解構出 全局 m1模塊下的 loginMutation 
    // 把loginMutation 放到this上 并且幫你寫好了 commit
    // 相當于幫你簡化了代碼
     ...mapMutations('m1', ['loginMutation']),
       //不是modules的直接寫  ...mapMutations( ['loginMutaton])

store.js

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

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

        }
       
    },
    
  }
})

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

解決當我們的狀態樹過于龐大和復雜時的一種解決方案.  但是筆者認為, 一旦用了vuex, 幾乎 就認定該項目是較為復雜的

參考文檔

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

封裝Vue組件的步驟

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

封裝輪播圖 -  1 新建vue組件 2 Vue.component注冊組件 3  在其他組件使用 標簽名

參數： 可以傳入數據 使用props接受 比如 數組 定時器時間等

分析: 本題考查 對于Vue組件化開發的熟練程度

解析: 首先明確 組件是本質是什么?

組件就是一個單位的HTML結構 + 數據邏輯 + 樣式的 操作單元

Vue的組件 繼承自Vue對象, Vue對象中的所有的屬性和方法,組件可自動繼承.

• 組件的要素  template  =>  作為頁面的模板結構

• script  => 作為數據及邏輯的部分

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

要封裝一個組件,首先要明確該組件要做的具體業務和需求,  什么樣的體驗特征, 完成什么樣的交互, 處理什么樣的數據

明確上述要求之后, 著手模板的結構設計及搭建,也就是 常說的html結構部分,  先完成 靜態的html結構

結構完成, 著手數據結構的設計及開發, 數據結構一般存儲于組件的data屬性 或者 vuex 狀態共享的數據結構

數據設計完成/ 結構完成  接下來 完成數據和模塊的結合 , 利用vuejs中指令和 插值表達式的特性 將靜態結構 **動態化**

展現的部分完成, 接下來完成**交互部分**,即利用 組件的生命周期的鉤子函數 和 事件驅動 來完成 邏輯及數據的處理與操作

最后組件完成,進行測試及使用

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

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

Vue中的data是以函數的形式還是對象的形式表示

分析: 此題考查 data的存在形式 解析: 我們在初步學習Vue實例化的時候寫的代碼時這個樣子上面代碼中的data 是一個對象, 但是我們在開發組件的時候要求data必須是一個帶返回值的函數

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

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

為什么組件要求必須是帶返回值的函數?  因為 我們的組件在實例化的時候, 會直接將data數據作用在視圖上,對組件實例化, 會導致我們組件的data數據進行共享

好比  現在有兩輛新車, 你一踩油門, 不光你的車往前車,另輛車也和你一樣往前沖!

這顯然不符合我們的程序設計要求, 我們希望組件內部的數據是相互獨立的,且互不響應，所以 采用   return {}  每個組件實例都返回新對象實例的形式，保證每個組件實例的唯一性

到此，相信大家對“vue的前端基礎面試題有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！