2024年最新关于Vue代码可读性的几点建议，面试进阶100题网盘

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

例如一个收藏的功能，只要请求一个接口就完成，类似这样的功能不要提取。要有一定复杂度的逻辑操作的功能才提取。

• 功能要单一，一个功能组件只处理一项业务。

例如一个文件阅读器组件，有一个需求，要求打开文件后自动收藏该文件，那么收藏逻辑代码要写在哪里呢？

或许你想都没想就在组件中监听文件成功打开的方法中写下收藏逻辑代码，过一段时间后，需求改为要先添加到阅读记录中再点击收藏按钮收藏，去组件中修改代码时发现另一个页面也引用了这个组件，故在组件中要额外加个参数做业务场景区分，随着需求的变化导致业务场景的叠加，组件的代码中会添加各种判断逻辑，久而久之变得又长又臭，显然这种做法是不可去。

正确的做法是在组件标签上自定义一个事件on-fileOpen-success，用handleFileOpenSuccess函数来监听这个事件。

<fileReader

@on-fileOpen-success=“handleFileOpenSuccess”

在组件中监听文件成功打开的方法中执行this.$emit('on-fileOpen-success',data)触发这个事件，其中data可以把文件信息传递出去，在handleFileOpenSuccess函数去处理收藏或者添加历史记录再收藏等业务交互。这种做法使文件阅读器组件具有单一性。

• 功能组件尽量少包含UI部分，UI部分用slot插槽传入，这样使组件更纯粹，更具有复用性。

例如上传组件的上传图标，不可能随着UI设计稿的变动就往里面添加一个上传图标，此时可以利用slot插槽把上传图标传入。

//upload.vue

//index.vue

<template #icon>

//上传图标

二、利用v-bind使组件的属性更具有可读性

---

如果想要将一个对象的所有属性都作为prop传入组件componentA，可以使用不带参数的v-bind。例如，对于一个给定的对象params：

params: {

id: 1,

name: ‘vue’

}

优化前

优化后

三、利用attrs与attrs与attrs与listeners来封装第三方组件

---

1、$attrs

在封装第三方组件中，经常会遇到一个问题，如何通过封装的组件去使用第三方组件自身的属性和事件。

比如封装一个elementUi组件中的Input输入框组件myInput，当输入错误的内容在输入框下面显示错误的提示。

myInput组件代码如下所示：

{{errorTip}}

这样调用myInput组件，其中errorTip为输入框输入错误的提示。

如果要在myInput组件上添加一个disabled属性来禁用输入框，要如何实现呢？一般同学会这么做

<el-input v-model=“input”

:disabled=“disabled”>

{{errorTip}}

过一段时间后又要在myInput组件上添加el-input组件其它的属性，el-input组件总共有27个多，那该怎么呢，难道一个个用prop传进去，这样做不仅可读性差而且繁琐，可以用$attrs一步到位，先来看一下attrs的定义。

$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件

<el-input v-model=“input”

v-bind=“$attrs”>

{{errorTip}}

这还不够，还得把inheritAttrs选项设置为false，为什么呢，来看一下inheritAttrs选项的定义就明白了。

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。而通过 $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。注意：这个选项不影响 class 和 style 绑定。

简单来说，把inheritAttrs设置为false，v-bind="$attrs" 才生效。

<el-input v-model=“input”

v-bind=“$attrs”>

{{errorTip}}

这样就可以很清楚的把el-input组件的属性和myinput组件的属性区分开来了，组件的props选项的可读性大大提高。

2、$listeners

那么如何实现在myIpput组件上使用el-input组件上自定义的事件呢，可能你的第一反应是this.$emit。

<el-input v-model=“input”

v-bind=“$attrs”

@blur=“blur”>

{{errorTip}}