Selected vue interview questions (key points)

How does V001-vuerouter pass the value

1. Configure

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

in the componentthis.$route.params.id can be obtained.

[Topic recommendation]:2020 front-end vue interview questions summary (with answers)

2. In router-link Pass parameters in the tag.

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

You can also get it through: this.$route.params.id

The parameter passing method here is invisible parameter passing through router-link

3. Another method of params is to pass parameters through params and configure routing through name.

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

Get: this.$route.params.id

4. Pass parameters through query, and the parameters will be displayed in the ?id=? after the url

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

Get:this.$route.query.id

Disadvantages and solutions of using V002-v-if and v-for together

Since v-for has a higher priority than v-if, it will go to v-if once every time it loops, and v-if passes Create and destroy DOM elements to control the display and hiding of elements, so elements will be constantly created and destroyed, causing page lag and performance degradation.

Solution:

1. Wrap an element in the outer or inner layer of v-for to use v-if

2. Use computed processing

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

is processed as:

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>

What operations are generally performed in V003-beforeDestory

beforedestoryed is a life cycle executed before the component is destroyed. In this life cycle, we can clear the callback function or timer

① Unbind the custom event event.$off ② Eliminate the timer ③ Unbind the custom DOM event Such as window.scroll, etc.

For example, this scenario: the date needs to be stored when I click on the query, and the reading memory needs to be refreshed, but when I click on other pages and come in again, the memory needs to be cleared

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-Similar component passing value

1. If it is a sibling component, the value can be passed through the parent element as an intermediate component

1.2 $emitTransfer value, receive props

Use $emit to pass the value of child1.vue to the parent component, the parent component will pass the value to child2.vue, child2.vue uses props to receive

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. By creating a bus, pass the value

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

Specific usage: Create a new bus.js file in the same directory as main.js

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

2. Pass the value in component a

First introduce the bus.js file, and then pass the value $emit to

<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. Receive it in the same level b component through $on

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

Related learning recommendations: javascript video tutorial

The above is the detailed content of Selected vue interview questions (key points). For more information, please follow other related articles on the PHP Chinese website!