vue面试题的案例分析-创新互联

这篇文章将为大家详细讲解有关vue面试题的案例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家专业提供永昌企业网站建设,专注与网站制作、网站设计、html5、小程序制作等业务。10年已为永昌众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

V001-vuerouter是怎么传值的

1.在路由处配置

path:'/detail/:id'
调用：
this.$router.push({
    path:'/home/${id}'
})

在组件内通过this.$route.params.id即可获取。

【专题推荐】：2020年前端vue面试题大汇总（附答案）

2.在router-link标签中传递参数。

也可通过：this.$route.params.id获取

这里通过router-link传参方式是隐形传参

3.另一种params的是通过params传参，通过name配置路由。

//路由处：
{
    path：'/home',
    name:'Home',
    component:Home
}
调用：
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})

获取：this.$route.params.id

4.通过query来传递参数，参数会在url后边的?id=?中显示

//路由处：
{
    path：'/home',
    name:'Home',
    component:Home
}
调用：
this.$router.push({
    path:'/home',
    query:{
        id:id
    }
})

获取：this.$route.query.id

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

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

解决办法：

1.在v-for的外层或内层包裹一个元素来使用v-if

2.用computed处理

  

        

          {{ item.name }}
        
  

处理为：

computed: {
    qdleaderArrActive: function () {
        return this.qdleaderArr.filter(function (item) {
          return item.isActive
        })
    }
}

    

        {{ item.name }}
    

V003-beforeDestory里面一般进行什么操作

beforedestoryed是组件销毁之前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清

①解绑自定义事件 event.$off ②消除定时器 ③解绑自定义的DOM事件 如window.scroll等

比如这个场景：日期在我点击查询的时候要存储,刷新就读内存,但是我点击其他页面再进来的时候,这个内存要清空

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-同级组件传值

1.如果是兄弟组件，可通过父元素作为中间组件进行传值

1.2 $emit传值，props接收

使用$emit将child1.vue的值给父组件，父组件将值传给child2.vue,child2.vue使用props接收

parent.vue

child1.vue

child2.vue

2.通过创建一个bus，进行传值

// 创建一个文件，定义bus中间件，并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit('事件名称', 传递的参数)
// 在另一个组件中监听事件
bus.$on('事件名称', 得到传过来的参数)

具体使用：在main.js同级目录下新建bus.js文件

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

2、在组件a中传出值

先引入bus.js文件，再通过$emit传值

3、在同级b组件中通过$on接收

关于vue面试题的案例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

本文标题：vue面试题的案例分析-创新互联
文章路径：http://bzwzjz.com/article/doeiip.html