10 Essential Vue.js Interview Questions *
Toptal来源的基本问题,最好的Vue.Js开发人员和工程师可以回答这个问题. 在我们社区的推动下,我们鼓励专家提交问题并提供反馈.
Hire a Top Vue.js Developer NowInterview Questions
槽是子组件中的占位符,由父组件传递的内容填充. 常规槽的内容在父组件的作用域中编译,然后传递给子组件.
因此,你不能在slot的内容中使用子组件属性. But scoped slots 允许您将子组件数据传递给父作用域,然后在槽内容中使用该数据.
在Vue实例的data选项中定义的所有属性都是 reactive这意味着如果它们发生变化,组件将自动更新并根据需要重新呈现.
在初始化期间,所有这些属性都转换为getter和setter, 从而允许Vue检测这些属性何时被访问或更改.
在设计Vue应用程序时,必须考虑以下限制:
- 由于JavaScript的限制,我们无法检测对象属性的添加或删除
Vue.set
方法添加新的根级反应性属性时必须使用. - 类似地,Vue无法检测何时使用索引修改数组项.
Vue.set
must be used here as well.
Mixin支持是一个允许Vue中组件之间代码重用的特性.Js应用程序和软件组合工具.
mixin是一个JavaScript对象,它可以包含组件可以包含的任何选项. 当组件使用mixin时,所有的mixin内容都会与组件的选项合并.
Mixins有助于遵循DRY(不要重复自己)原则. mixin甚至可以全局地应用于每个组件实例. 在这种情况下,它被称为全局mixin.
Mixins是一个强大的工具,但在使用它们时需要谨慎. 与所有注入代码一样,我们应该小心避免维护问题和意外行为.
它有助于使用纯函数来实现mixins,这些函数不修改自己作用域之外的任何东西.
Global mixins should be avoided, 随着应用程序的增长,影响每个组件可能会导致维护问题. 根据需要向组件中注入特定的mixins会带来更易于维护的代码.
申请加入Toptal的发展网络
and enjoy reliable, steady, remote Freelance Vue.js Developer Jobs
单文件组件是一个带有 .vue
包含Vue组件的扩展. 它将组件的模板、逻辑和样式都捆绑在一个文件中. It consists of one block, optional
and
块,以及可能的其他自定义块.
To use one, 你需要设置Vue Loader来解析文件(通常作为webpack构建管道的一部分完成). 但这也支持使用非默认语言,如带有可插拔预处理器的Sass或HTML模板语言.
Vue.js uses what’s called a one-way data flow. 使用prop或自定义属性将数据从给定的父组件传递给子组件,这些属性将成为子组件实例的属性.
当父组件更新prop值时,它会在子组件中自动更新. 不应该改变子组件中的属性. 而且,它不会影响父组件(除非它是一个对象或数组)。.
子组件可以通过事件与父组件通信. 父组件可以为子组件实例发出的任何事件分配处理程序,并且可以将数据传递回父组件. 子组件可以发出一个特殊的事件来更新传递给它的道具.
Memory leaks in Vue.js应用程序通常来自于使用第三方库来创建自己的实例和/或操作DOM. The v-if
directive and the Vue Router destroy Vue component instances; however, 任何第三方库之后的清理都应该在 beforeDestroy()
lifecycle hook.
例如,假设我们使用一个虚构的库PowerGraph.js, inside our component. 它创建了一个图形实例,在页面上显示一些数据:
mounted() {
this.chart = new PowerGraph();
}
我们需要调用图形实例 destroy()
方法,或者实现我们自己的清理方法:
beforeDestroy() {
this.chart.destroy();
}
如果在组件被销毁之前没有完成清理, 那么这些内存永远不会被释放. Hence, a memory leak.
虚拟DOM是表示由Vue管理的DOM节点的JavaScript对象的树状数据结构(或集合).Js,并且应该在页面上呈现. 这些对象被称为“虚拟节点”或 VNode
s for short.
虚拟DOM的主要目的是实现更快、更有效的DOM操作. 当DOM中有很多节点时, 就处理能力和所需资源而言,更新它们可能代价高昂.
使用虚拟DOM JavaScript对象要快得多. Subsequently, Vue.js分批组织DOM更新以提高效率.
Consider the following code (index.html
is omitted for brevity.)它将在浏览器中输出什么? 也请提及任何值得注意的控制台输出.
const MockComponent = {
props: {
showMe: {
type: Boolean,
required: true,
},
},
template: `
This is a test component
`,
};
new Vue({
el: '#app',
components: {
MockComponent,
},
template: `
`,
});
A Boolean
prop在HTML中作为布尔属性工作. 如果存在布尔属性并且没有值(
),或者等于空字符串(如本例中所示)或其本身的名称 kebab case, its value is true. Therefore this example will output This is a test component
在浏览器中,并且在控制台中没有错误消息.
Bonus points for mentioning that required
这里没有多大意义,因为省略了这个道具(i).e.
)是将其值设置为false的正确方法.
Consider the following code (index.html
is omitted for brevity). 它将在控制台中输出什么?
const MockComponent = {
render() {
return this.$slots.default;
},
data() {
return {
status: '',
};
},
watch: {
status: {
handler(newVal) {
console.log('Status update: ' + newVal);
},
immediate: true,
},
},
beforeCreate() {
this.status = 'initializing';
},
mounted() {
this.status = 'online';
},
beforeDestroy() {
this.status = 'offline';
},
};
new Vue({
el: '#app',
components: {
MockComponent,
},
template: `
`,
data() {
return {
showComponent: false,
};
},
mounted() {
this.showComponent = true;
window.setTimeout(() => {
this.showComponent = false;
}, 1000);
},
});
It will output:
Status update:
Status update: online
当监视器立即运行时,它使用初始值,一个空字符串. The watcher isn’t triggered when beforeCreate
被触发,因为反应性尚未初始化. Watchers are destroyed before beforeDestroy
is called.
当开发人员选择一个技术栈时,他们应该展示对替代解决方案的优缺点的理解. Vue.应该将js与最流行的前端框架React和Angular进行比较.
Performance
这三个框架都显示出类似的性能. No significant difference here. However, 具有相同基本特性和功能的Angular应用比其他两个框架的编译大小更大.
Ease of Use
人们普遍认为React有一个陡峭的学习曲线. Developers need to learn JSX, ES6, 和一个构建系统(比如webpack),然后才能使用React. Create React App 假设你正在构建一个单页面应用程序,因此在其他场景中采用React将需要额外的学习时间.
Angular实际上需要了解TypeScript才能开始使用它. Angular框架的设计目标是构建企业级应用,而且相当复杂. 在开始生产之前,开发人员需要熟悉广泛的框架API及其概念.
One design goal of Vue.js was for it to be incrementally adoptable. 这意味着你可以将其放入遗留项目中并开始使用它,而无需从头开始重建整个应用程序. Vue.js使用了web开发人员已经熟悉的核心web技术:HTML, CSS, and plain JavaScript (ES5). 不需要使用构建工具:您可以使用 tag.
Suitability for Large-scale Apps
React和Angular是由Facebook和Google开发的, respectively, 所以它们从一开始就是企业级框架. While Vue.js started as a one-man project, it’s come a long way since then, 吸引了大量的支持者和开发人员——其核心团队现在有20多名开发人员.
More to the point, Vue.js has been adopted by a number of companies 包括Adobe和阿里巴巴等公司.
因此,这三个框架都非常适合构建大型应用程序.
Ecosystem
React是目前最流行的框架, 拥有比Vue和Angular更丰富的生态系统, 具有大量的第三方库.
To sum up, Vue.在构建大型应用程序时,Js与其他框架处于同等地位, 当您需要处理遗留应用程序或快速完成某些工作时,它非常出色. 但值得先检查一下生态系统对项目细节的支持.
面试不仅仅是棘手的技术问题, 所以这些只是作为一个指南. 并不是每一个值得雇佣的“A”候选人都能回答所有的问题, 回答所有问题也不能保证成为A级考生. At the end of the day, 招聘仍然是一门艺术,一门科学,需要大量的工作.
Why Toptal
Tired of interviewing candidates? 不知道该问什么才能让你得到一份好工作?
让Toptal为你找到最合适的人.
Hire a Top Vue.js Developer NowOur Exclusive Network of Vue.js Developers
Looking to land a job as a Vue.js Developer?
让Toptal为你找到合适的工作.
Apply as a Vue.js DeveloperJob Opportunities From Our Network
Submit an interview question
提交的问题和答案将被审查和编辑, 并可能会或可能不会选择张贴, at the sole discretion of Toptal, LLC.
Looking for Vue.js Developers?
Looking for Vue.js Developers? Check out Toptal’s Vue.js developers.
Matthew Newman
Freelance Vue.js Developer
Matthew在数据库管理和软件开发方面拥有超过15年的经验, 专注于全栈web应用程序. He specializes in Django and Vue.拥有在AWS上部署服务器和无服务器环境的专业知识. 他还处理关系数据库和大型数据集.
Show MoreSergej Kurbanov
Freelance Vue.js Developer
Sergej是一名全栈开发人员,他在构建可扩展平台和功能丰富的应用程序方面拥有近7年的经验,可以带来创新和增长. 从构建自己的ai驱动SaaS产品到指导150多名学生成为初级React开发人员, Sergej的参与方法和保持领先的奉献精神使他成为任何项目或团队的宝贵资产.
Show MorePatryk Pawłowski
Freelance Vue.js Developer
Patryk是一位经验丰富的全栈开发人员,擅长所有类型的现代JavaScript实现——从构建后端和api到构建像素完美的web和移动应用程序. 这要归功于他经营自己公司的经验和设计背景, 他是业务团队和产品团队之间的伟大促进者. 帕特里克也喜欢在会议上发言.
Show MoreToptal Connects the Top 3% 世界各地的自由职业人才.
Join the Toptal community.