Selected vue interview questions (key points)

Release: 2020-08-01 10:22:27
forward
9303 people have browsed it

Selected vue interview questions (key points)

How does V001-vuerouter pass the value

1. Configure

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

in the componentthis.$route.params.idcan be obtained.

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

2. Inrouter-link Pass parameters in thetag.

Copy after login

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 } })
Copy after login

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 } })
Copy after login

Get:this.$route.query.id

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

Sincev-forhas a higher priority thanv-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 usev-if

2. Use computed processing

  • {{ item.name }}
Copy after login

is processed as:

computed: { qdleaderArrActive: function () { return this.qdleaderArr.filter(function (item) { return item.isActive }) } } 
  • {{ item.name }}
Copy after login

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 eventevent.$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') }
Copy after login

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

 
Copy after login

child1.vue

 
Copy after login

child2.vue

 
Copy after login

2. By creating a bus, pass the value

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

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

import Vue from 'vue' export default new Vue()
Copy after login

2. Pass the value in component a

First introduce thebus.jsfile, and then pass the value$emitto

 
Copy after login

3. Receive it in the same level b component through$on

Copy after login

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!

Related labels:
source:weixin
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!