vue的前端基礎(chǔ)面試題有哪些

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

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

vue的前端基礎(chǔ)面試題有哪些

vue 傳值方式

vue傳值

  • 父  子 傳值   使用props接受

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

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

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

  • provide, inject注入方式

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

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

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

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

2、需要new 一下 寫上全局?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')
<template>
  <div class="home">
     <!-- home啊
     <hr>
     {{$store.state.m1.m1Name}}
    <button @click="add">點(diǎn)擊</button> -->

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

    <button @click="getAll">發(fā)送請(qǐng)求</button>

    home組件啊
    <hr>
    <h2>count的值:{{$store.state.count}}</h2>
    <button @click="addCount">讓全局count+1</button>
    <hr>
    <h3>m1下的全局?jǐn)?shù)據(jù) {{$store.state.m1.m1Name}} </h3>
     <button @click="add">點(diǎn)擊修改某個(gè)模塊的數(shù)據(jù)</button>

     <!-- 3 哪個(gè)組件要用 就直接 使用注冊(cè)的組件標(biāo)簽名 -->
     <hr>
     <!-- 用組件 傳了list數(shù)據(jù)進(jìn)去 -->
     <my-swiper :list="list"></my-swiper>
     
  </div>
</template>


<script>
// 要在組件使用全局?jǐn)?shù)據(jù) 
// 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:{
    // 這句話的意思是 直接 解構(gòu)出 全局 m1模塊下的 loginMutation 
    // 把loginMutation 放到this上 并且?guī)湍銓懞昧?nbsp;commit
    // 相當(dāng)于幫你簡(jiǎn)化了代碼
     ...mapMutations('m1', ['loginMutation']),
    //不是modules的直接寫  ...mapMutations( ['loginMutation'])
     add(){
      //  console.log('add',this)
      //   console.log('add',this.$route.meta)
      //  this.$store.commit("m1/loginMutation")
      // 或者下面的  先mapMutations 相當(dāng)于幫你寫了commit
      this.loginMutation()
      // this.$store.commit("m1/loginMutation")
      // 和剛剛的思路 就是加上一個(gè)模塊前綴 m1/ 
      // this.$store.dispatch("m1/loginAction")
     },
     async getAll(){
      //  http://localhost:8080/
      // 請(qǐng)求 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(){
        //  讓全局?jǐn)?shù)據(jù)count+1
        // 1 正常情況 
        // dispatch 觸發(fā)action
        // -》commit觸發(fā)mutation
        // -》在mutation修改全局?jǐn)?shù)據(jù)
        //2 其他情況 可以直接跳過action 但是必須mutation修改
        // console.log('$store',this.$store)
        // this.$store.dispatch( 'countAction' )
        this.$store.commit("countMutation")
      }
  }
}
</script>

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

他的使用邏輯是什么？

在 store里面的   state  寫的數(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

其他情況 你也可以跳過 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è)組件 用到, 那完全沒有任何必要為了使用vuex和使用vuex

舉例:  一個(gè)網(wǎ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ù)含義分類 , 比如下面

{
    // 系統(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提供了專門做異步請(qǐng)求的模塊,action, 當(dāng)然action中也可以做同步操作, 只不過 分工更加明確, 所有的數(shù)據(jù)操作 不論是同步還是異步 都可以在action中完成,

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

所以可以認(rèn)為

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

mutations => 負(fù)責(zé)同步更新狀態(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ù)越來越復(fù)雜的時(shí)候, 模塊化的解決方案

**解析**:使用單一的狀態(tài)樹，應(yīng)用的所有狀態(tài)都會(huì)**集中在一個(gè)比較大的對(duì)象**上面，隨著項(xiàng)目需求的不斷增加，狀態(tài)樹也會(huì)變得越來越臃腫，增加了狀態(tài)樹維護(hù)的復(fù)雜度,而且代碼變得沉長；因此我們需要**modules(模塊化)**來為我們的狀態(tài)樹**分隔**成不同的模塊，每個(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樹
        └── module2.js   # 模塊2的state樹

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

需要注意的是  我們?cè)瓉硎褂?code>**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

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

     // 這句話的意思是 直接 解構(gòu)出 全局 m1模塊下的 loginMutation 
    // 把loginMutation 放到this上 并且?guī)湍銓懞昧?nbsp;commit
    // 相當(dāng)于幫你簡(jiǎn)化了代碼
     ...mapMutations('m1', ['loginMutation']),
       //不是modules的直接寫  ...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: {
    // 在這里寫的就是所有組件都能有 全局?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ù) 是可以來分模塊管理的
  // 他可以用來區(qū)分每個(gè)不同模塊的數(shù)據(jù)
  // 15:10 上課
  modules: {
    // 模塊:{  一套state action mutation }
    m1: {
      namespaced: true,//開啟命名空間大白話 他是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)樹過于龐大和復(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組件化開發(fā)的熟練程度

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

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

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

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

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

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

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

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

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

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

展現(xiàn)的部分完成, 接下來完成**交互部分**,即利用 組件的生命周期的鉤子函數(shù) 和 事件驅(qū)動(dòng) 來完成 邏輯及數(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è)陂_發(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)在有兩輛新車, 你一踩油門, 不光你的車往前車,另輛車也和你一樣往前沖!

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

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

新聞名稱：vue的前端基礎(chǔ)面試題有哪些
當(dāng)前路徑：http://bm7419.com/article34/pcdhpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站排名、面包屑導(dǎo)航、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)