vue 면접 질문 선정(핵심)

V001-vuerouter는 어떻게 값을 전달하나요?

1. 경로에서

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

를 구성하고 구성 요소에서 this.$route.params.id를 통해 가져옵니다. this.$route.params.id即可获取。

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

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

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

也可通过：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处理

  <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里面一般进行什么操作

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

<template>
  <div>
     <h2 id="我是父组件">我是父组件</h2>
     <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>
     <h2 id="我是child-组件">我是child1组件</h2>
     <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方法，同时将值传递给父组件
    }
  }
}
</script>

child2.vue

<template>
  <div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父组件穿过来的值ptitle
 props:{ptitle:{ type: String}}
}
</script>

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传值

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

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

[주제 추천]: 2020 프론트엔드 Vue 인터뷰 질문 요약(답변 포함)

2. router-link 태그에 매개변수를 전달합니다.

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

🎜는 this.$route.params.id🎜🎜🎜여기서 라우터 링크를 통한 매개변수 전달 방법은 보이지 않는 매개변수 전달🎜🎜🎜3입니다. Params 전달 매개변수를 통해 이름을 통해 라우팅을 구성합니다. 🎜rrreee🎜Get: this.$route.params.id🎜🎜4. 쿼리를 통해 매개변수를 전달하면 해당 매개변수가 url🎜rrreee🎜Get: 뒤에 표시됩니다. > this.$route.query.id🎜🎜🎜V002-v-if와 v-for를 함께 사용할 때의 단점과 해결책🎜🎜🎜v-for의 우선순위로 인해v-if가 높으므로 반복할 때마다 한 번씩 v-if로 이동하고, v-if는 dom 요소를 생성하고 삭제하여 요소의 표시 및 숨기기를 제어하므로 지속적으로 해당 위치로 이동합니다. . 요소를 생성하고 삭제하면 페이지 지연 및 성능 저하가 발생합니다. 🎜🎜해결책: 🎜🎜1. v-for의 외부 또는 내부 레이어에 요소를 래핑하여 v-if🎜🎜2를 사용하여 🎜rrreee🎜를 처리하고 다음과 같이 처리합니다. rrreee🎜 🎜V003-beforeDestory에서 일반적으로 수행되는 작업은 무엇입니까? 🎜🎜🎜beforedestoryed는 구성 요소가 파괴되기 전에 실행되는 수명 주기입니다. 이 수명 주기에서는 콜백 함수나 타이머를 지울 수 있습니다. 🎜🎜① 사용자 정의 이벤트 바인딩 해제 event.$off ② 타이머 제거 ③ window.scroll 등의 사용자 정의 DOM 이벤트 바인딩을 해제합니다. 🎜🎜 예를 들어 다음 시나리오에서는 쿼리를 클릭할 때 날짜를 저장해야 하고 메모리가 새로 고쳐집니다. , 그런데 다른 페이지를 클릭하면 다시 들어올 때 이 메모리를 지워야 합니다🎜rrreee🎜🎜V004-유사 컴포넌트 전달 값🎜🎜🎜1. 형제 컴포넌트인 경우 상위 요소를 중간 컴포넌트로 사용할 수 있습니다. 값 전달🎜🎜1.2 $emit code> 값 전달, props receive🎜🎜$emit를 사용하여 child1.vue 값을 상위 구성 요소에 전달하면 상위 구성 요소는 해당 값을 child2.vue, child2에 전달합니다. .vue는 props를 사용하여🎜🎜<code>parent.vue 🎜rrreee🎜child1.vue🎜rrreee🎜child2.vue🎜rrreee🎜2 패스를 수신합니다. 버스를 생성하여 🎜rrreee🎜구체적인 용도: main.js 레벨 디렉터리에 새 bus.js 파일을 생성합니다🎜rrreee🎜2. 컴포넌트 a에 값을 전달합니다🎜🎜먼저 bus.js를 소개합니다. 파일을 찾은 다음 $emit🎜 rrreee🎜3을 통해 값을 전달합니다. 동일한 레벨의 구성 요소 b에서 $on을 통해 🎜rrreee🎜🎜를 받습니다. 🎜 자바스크립트 비디오 튜토리얼🎜🎜🎜

위 내용은 vue 면접 질문 선정(핵심)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!