這篇文章將為大家詳細(xì)講解有關(guān)vue面試題的案例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供永昌企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、html5、小程序制作等業(yè)務(wù)。10年已為永昌眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

V001-vuerouter是怎么傳值的

1.在路由處配置

path:'/detail/:id'
調(diào)用：
this.$router.push({
    path:'/home/${id}'
})

在組件內(nèi)通過(guò)this.$route.params.id即可獲取。

【專題推薦】：2020年前端vue面試題大匯總（附答案）

2.在router-link標(biāo)簽中傳遞參數(shù)。

<router-link :to = {
    params:{
        id:1
    }
}/>

也可通過(guò)：this.$route.params.id獲取

這里通過(guò)router-link傳參方式是隱形傳參

3.另一種params的是通過(guò)params傳參，通過(guò)name配置路由。

//路由處：
{
    path：'/home',
    name:'Home',
    component:Home
}
調(diào)用：
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})

獲?。?code>this.$route.params.id

4.通過(guò)query來(lái)傳遞參數(shù)，參數(shù)會(huì)在url后邊的?id=?中顯示

//路由處：
{
    path：'/home',
    name:'Home',
    component:Home
}
調(diào)用：
this.$router.push({
    path:'/home',
    query:{
        id:id
    }
})

獲取：this.$route.query.id

V002-v-if和v-for一起使用的弊端及解決辦法

由于v-for的優(yōu)先級(jí)比v-if高，所以導(dǎo)致每循環(huán)一次就會(huì)去v-if一次，而v-if是通過(guò)創(chuàng)建和銷毀dom元素來(lái)控制元素的顯示與隱藏，所以就會(huì)不停的去創(chuàng)建和銷毀元素，造成頁(yè)面卡頓，性能下降。

解決辦法：

1.在v-for的外層或內(nèi)層包裹一個(gè)元素來(lái)使用v-if

2.用computed處理

  <ul>
        <li
          v-for="item in qdleaderArr"
          v-if="item.isActive"
          :key="item.id"
        >
          {{ item.name }}
        </li>
  </ul>

處理為：

computed: {
    qdleaderArrActive: function () {
        return this.qdleaderArr.filter(function (item) {
          return item.isActive
        })
    }
}
<ul>
    <li
      v-for="item in qdleaderArrActive"
      :key="item.id"
    >
        {{ item.name }}
    </li>
</ul>

V003-beforeDestory里面一般進(jìn)行什么操作

beforedestoryed是組件銷毀之前執(zhí)行的一個(gè)生命周期，在這個(gè)生命周期里，我們可以進(jìn)行回調(diào)函數(shù)或定時(shí)器的清

①解綁自定義事件 event.$off ②消除定時(shí)器 ③解綁自定義的DOM事件 如window.scroll等

比如這個(gè)場(chǎng)景：日期在我點(diǎn)擊查詢的時(shí)候要存儲(chǔ),刷新就讀內(nèi)存,但是我點(diǎn)擊其他頁(yè)面再進(jìn)來(lái)的時(shí)候,這個(gè)內(nèi)存要清空

search(){
      let time = {
        start: this.formSearch.beginSearchTime,
        end: this.formSearch.endSearchTime,
        timeRange: this.formSearch.timeRange,
        page: this.formSearch.page
      }
      localStorage.setItem('initTime',JSON.stringify(time))
    }
 created () {
    let searchCarTime = JSON.parse(localStorage.getItem('initTime'))
    if (searchCarTime) {
      this.formSearch.beginSearchTime = searchCarTime.start
      this.formSearch.endSearchTime = searchCarTime.end,
      this.formSearch.timeRange = searchCarTime.timeRange
      this.formSearch.page = searchCarTime.page
    }
  },
 beforeDestroy(){
    localStorage.removeItem('initTime')
  }

V004-同級(jí)組件傳值

1.如果是兄弟組件，可通過(guò)父元素作為中間組件進(jìn)行傳值

1.2 $emit傳值，props接收

使用$emit將child1.vue的值給父組件，父組件將值傳給child2.vue,child2.vue使用props接收

parent.vue

<template>
  <div>
     <h3>我是父組件</h3>
     <child1 @handleClickChange="handleClickChangeTitle"></child1>
     <child2 :ptitle="title"></child2>
  </div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {
  data() {
    return {
      title: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    handleClickChangeTitle(title){//將改方法傳遞給child1組件
        this.title = title
    }
  }
}
</script>

child1.vue

<template>
  <div>
     <h3>我是child1組件</h3>
     <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$emit("handleClickChange",title)//連接父組件的handleClickChange方法，同時(shí)將值傳遞給父組件
    }
  }
}
</script>

child2.vue

<template>
  <div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父組件穿過(guò)來(lái)的值ptitle
 props:{ptitle:{ type: String}}
}
</script>

2.通過(guò)創(chuàng)建一個(gè)bus，進(jìn)行傳值

// 創(chuàng)建一個(gè)文件，定義bus中間件，并導(dǎo)出
const bus = new Vue()
// 在一個(gè)組件中發(fā)送事件
bus.$emit('事件名稱', 傳遞的參數(shù))
// 在另一個(gè)組件中監(jiān)聽事件
bus.$on('事件名稱', 得到傳過(guò)來(lái)的參數(shù))

具體使用：在main.js同級(jí)目錄下新建bus.js文件

import Vue from 'vue'
export default new Vue()

2、在組件a中傳出值

先引入bus.js文件，再通過(guò)$emit傳值

<template>
    <div @click="onfocus"></div>
</template>
<script>
    import Bus from '@/bus.js'
    
    export default{
        methods:{
            onfocus:function(fromid){
                Bus.$emit('getisshow',{
                    show:true
                })
             }
        }
    }
</script>

3、在同級(jí)b組件中通過(guò)$on接收

<script>
    import Bus from '@/bus.js'
    
    export default{
        created(){
            Bus.$on('getisshow',data => {
                console.log(data)   //{show:true}
            })
        }
    }
</script>

關(guān)于vue面試題的案例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章題目：vue面試題的案例分析-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://www.rwnh.cn/article8/doeiip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、小程序開發(fā)、動(dòng)態(tài)網(wǎng)站、電子商務(wù)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)