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
我是child1组件
{{title}}
child2.vue
{{ptitle}}
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://myzitong.com/article/doeiip.html