【vue】 面试题总结 - 组件

资源来自：https://developer.aliyun.com/ask/289308?spm=a2c6h.13066354.0.0.767533b5ZcyIwH

vue怎么实现强制刷新组件？

v-if
this.$forceUpdate()
:key
https://segmentfault.com/a/1190000023470303

vue自定义事件中父组件怎么接收子组件的多个参数？

this.$emit("eventName",data) data为一个对象 父组件那边用解构赋值取

vue给组件绑定自定义事件无效怎么解决

1、组件外部加修饰符.navtive
2、组件内部声明$emit('自定义事件')

vue如果想扩展某个现有的组件时，怎么做呢？

1.使用Vue.extend直接扩展
2.使用Vue.mixin全局混入
3.HOC封装 https://www.jianshu.com/p/749867d1e84d
4.加slot扩展

vue中什么是递归组件？举个例子说明下？

当前注册一个vue组件定义 name 为 ‘node-tree’ ，在组件 template 内部调用 实现递归。
组件自己调用自己，场景有用于生成树形结构菜单

怎么访问到子组件的实例或者子元素？

在子组件标签上加 ref属性如ref="baseAlert"，在父组件通过this.$refs.baseAlert.子组件方法名。

在子组件中怎么访问到父组件的实例？

this.$parent

在组件中怎么访问到根实例？

无限循环调用$parent直到没有这个属性为止

vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？

肯定要，一方面是绑定多次，另一方面是函数没释放会内存溢出

vue组件里的定时器要怎么销毁？

可以在beforeDestroy里写清除函数

const timer = setInterval(() =>{
// 某些定时器操作
}, 500);

// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。

this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

这里还要考虑 KeepAlive 缓存的情况 建议在deactivated中执行一次销毁

vue组件会在什么时候下被销毁？

没有使用keep-alive时的路由切换。

说说组件的命名规范

定义组件名有两种方式：
1.kebab-case（短横线分隔命名），引用时必须也采用kebab-case；
2.PascalCase（首字母大写命名），引用时既可以采用PascalCase也可以使用kebab-case； 但在DOM中使用只有kebab-case是有效的
命名：MyComponent，调用：my-component

你了解什么是函数式组件吗？

函数式组件：
需要提供一个render方法， 接受一个参数（createElement函数）， 方法内根据业务逻辑，通过createElement创建vnodes，最后return vnodes
createElement函数， 三个参数， 第一个参数是html标签或自定义组件，第二个参数一个obj（包含props， on…等等）， 第三个参数children(通过createElement构建， 或者字符串)

组件中写name选项有什么作用？

项目使用keep-alive时，可搭配组件name进行缓存过滤
DOM做递归组件时需要调用自身name
vue-devtools调试工具里显示的组见名称是由vue中组件name决定的

说说你对provide和inject的理解

通过在父组件中provide一些数据然后再所有子组件中都可以通过inject获取使用该参数,
主要是为了解决一些循环组件比如tree, menu, list等, 传参困难, 并且难以管理的问题, 主要用于组件封装, 常见于一些ui组件库

说说你对slot的理解有多少？slot使用场景有哪些？

slot, 插槽, 在使用组件的时候, 在组建内部插入东西. 组件封装的时候最常使用到

说说你对vue组件的设计原则的理解

第一: 容错处理, 这个要做好, 极端场景要考虑到,
第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值
第三: 颗粒化, 把组件拆分出来.
第四: 一切皆可配置, 如有必要, 组件里面使用中文标点符号, 还是英文的标点符号, 都要考虑到
第五: 场景化, 如一个dialog弹出, 还需要根据不同的状态封装成success, waring, 等
第六: 有详细的文档/注释和变更历史, 能查到来龙去脉, 新版本加了什么功能是因为什么
第七: 组件名称, 参数prop, emit, 名称设计要通俗易懂, 最好能做到代码即注释这种程度
第八: 可拓展性, 前期可能不需要这个功能, 但是后期可能会用上, 要预留什么, 要注意什么, 心里要有数
第九: 规范化,我这个input组件, 叫on-change, 我另外一个select组件叫change,
第十: 分阶段: 不是什么都要一期开发完成看具体业务, 如果一个select, 我只是个简单的select功能

怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？

可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等

vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
把数组原有的方法， 继续执行， 后面增加了ob.dep.notify() 这个是关键

vue父子组件双向绑定的方法有哪些？

1.利用对象的引用关系来实现
2.父子组件之间的数据传递
3.使用.sync修饰符 （需要具体的代码）

为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？

配合相应的loader，也可以写为js,jsx,ts,tsx这种

为什么vue使用异步更新组件？

批量更新 收集当前的改动一次性更新 节省diff开销
避免不必要的计算和dom操作

写出多种定义组件模板的方法

1、字符串
2、模板字面量
3、<script type="x-template"></script>
4、文件组件模板
5、inline-template

如何在子组件中访问父组件的实例？

Vue中子组件调用父组件的方法，这里有三种方法提供参考：
1：直接在子组件中通过this.$parent.event来调用父组件的方法
2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法

组件进来请求接口时你是放在哪个生命周期？为什么？

一般在created 因为在这个生命周期我们常用到的都已经初始化好了 如果涉及dom 那就mounted

组件和插件有什么区别？

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

vue组件之间的通信都有哪些？

父子Coms: 1/2/3 …
兄弟Coms: 4/5
跨级Coms: 4/5/6/7

props
$emit/$on
( $parents/$children ) / $refs
Vuex
Bus
( provide/inject )
( $attrs/$listeners )

vue在组件中引入插件的方法有哪些？

插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制——
一般有下面几种：
添加全局方法或者属性。如: vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加Vue实例方法，通过把它们添加到Vue.prototype上实现。
一个库，提供自己的API，同时提供上面提到的一个或多个功能。如 vue-router
https://element.eleme.cn/#/zh-CN/component/quickstart

怎么捕获组件vue的错误信息？

使用errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、
发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。