目录
16、Vue-cli 用自定义的组件？有遇到过哪些问题吗？（必会）
17、Vue 中 slot 的使用方式，以及 slot 作用域插槽的用法（必 会）
19、跟 keep-alive 有关的生命周期是哪些？（必会）
11、Vue 组件 data 为什么必须是函数（必会）
1、data 组件都是 Vue 的实例
2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其
他
3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就
会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各
自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全
都会变的结果
12、讲一下组件的命名规范（必会）
给组件命名有两种方式，一种是使用链式命名 my-component，一种是使用大驼峰命名
MyComponent 在字符串模板中<my-component></my-component> 和
<MyComponent></MyComponent>都可以使用，在非字符串模板中最好使用
<MyComponent></MyComponent>，因为要遵循 W3C 规范中的自定义组件名 (字母全小写且必
须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突
13、怎么在组件中监听路由参数的变化？（必会）
有两种方法可以监听路由参数的变化，但是只能用在包含<router-view />的组件内。
第一种
watch: {
'$route'(to, from) {
// 在此处监听
},
},
第二种
beforeRouteUpdate (to, from, next) {
北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com
第 224 页 共 348 页 //这里监听
}
14、怎么捕获 Vue 组件的错误信息？（必会）
1、errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、
vm、info 三个参数，return false 后可以阻止错误继续向上抛出
2、errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一
致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底
15、Vue 组件里的定时器要怎么销毁？（必会）
如果页面上有很多定时器，可以在 data 选项中创建一个对象 timer，给每个定时器取个名
字一一映射在对象 timer 中， 在 beforeDestroy 构造函数中 for(let k in this.timer){clearInterval(k)}；
如果页面只有单个定时器，可以这么做
const timer = setInterval(() =>{}, 500);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
16、Vue-cli 用自定义的组件？有遇到过哪些问题吗？（必会）
1、在 components 目录新建你的组件文件（indexPage.vue），script 一定要 export default {}
2、在需要用的页面（组件）中导入：import indexPage from '@/components/indexPage.vue'
3、注入到 vue 的子组件的 components 属性上面,components:{indexPage}
4、在 template 视图 view 中使用，例如有 indexPage 命名，使用的时候则 index-page
17、Vue 中 slot 的使用方式，以及 slot 作用域插槽的用法（必 会）
使用方式
当组件当做标签进行使用的时候，用 slot 可以用来接受组件标签包裹的内容，当给 slot
标签添加 name 属性的时候，可以调换响应的位置
插槽作用域
作用域插槽其实就是带数据的插槽，父组件接收来自子组件的 slot 标签上通过 v-bind
绑定进而传递过来的数 据，父组件通过 scope 来进行接受子组件传递过来的数据
18、Vue 该如何实现组件缓存?（必会）
在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织
起来，那么自然会存在组件之前切换的问题，vue 中有个动态组件的概念，它能够帮助开发者更
好的实现组件之间的切换，但是在面对需求频繁的变化，去要切换组件时，动态组件在切换的过
程中，组件的实例都是重新创建的，而我们需要保留组件的状态，为了解决这个问题，需要使用
到 vue 中内置组件<keep-alive>
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组
件状态或避免重新渲染，
简答的说: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>
打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用
<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，
而不是重新渲染
19、跟 keep-alive 有关的生命周期是哪些？（必会）
1、前言：在开发 Vue 项目的时候，大部分组件是没必要多次渲染的，所以 Vue 提供了一个
内置组件 keep-alive 来缓存组件内部状态，避免重新渲染，在开发 Vue 项目的时候，大部分组件
是没必要多次渲染的，所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态，避免重新
渲染
2、生命周期函数：在被 keep-alive 包含的组件/路由中，会多出两个生命周期的钩
子:activated 与 deactivated。
2.1）activated 钩子：在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时
调用。
2.2）Activated 钩子调用时机： 第一次进入缓存路由/组件，在 mounted 后面，
beforeRouteEnter 守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存
路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发
2.3）deactivated 钩子：组件被停用（离开路由）时调用：deactivated 钩子调用时机：
使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁)，因为组件没被
销毁，被缓存起来了，这个钩子可以看作 beforeDestroy 的替代，如果你缓存了组件，要在组件销
毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子 beforeRouteLeave =>
路由前置守卫 beforeEach =>全局后置钩子 afterEach => deactivated 离开缓存组件 => activated
进入缓存组件(如果你进入的也是缓存路由)
20、Vue 常用的修饰符都有哪些？（必会）
.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素
本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用
