经常会被问及的 Vue 面试题(上)

前端达人

共 8993字,需浏览 18分钟

 ·

2021-10-17 22:53

0.前言

原文有 36 道 vue 常用面试题,考虑到太多一次也看不完,所以分为 上、中、下三篇,如果你能读完这三篇文章,相信你在面试中 vue 的问题你不会怕了。

1.页面中定义一个定时器,在哪个阶段清除?

答案:在 beforeDestroy 中销毁定时器。

① 为什么销毁它:

在页面 a 中写了一个定时器,比如每隔一秒钟打印一次 1,当我点击按钮进入页面 b 的时候,会发现定时器依然在执行,这是非常消耗性能的。

② 解决方案 1:

mounted(){
this.timer = setInterval(()=>{
console.log(1)
},1000)
},
beforeDestroy(){
clearInterval(this.timer)
}

方案 1 有两点不好的地方,引用尤大的话来说就是:

它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。

我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西。

方案 2(推荐):该方法是通过$once 这个事件侦听器在定义完定时器之后的位置来清除定时器

mounted(){
const timer = setInterval(()=>{
console.log(1)
},1000)
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer)
})
}

官网参考链接:https://cn.vuejs.org/v2/guide/components-edge-cases.html

2.父组件如何获取子组件的数据,子组件如何获取父组件的数据,父子组件如何传值?

① 先说,父组件如何主动获取子组件的数据?

方案 1:$children

$children 用来访问子组件实例,要知道一个组件的子组件可能是不唯一的,所以它的返回值是数组。

现在,我们定义 Header,HelloWorld 两个组件