VUE面试题

一、vue生命周期有哪些

beforeCreate：在实例创建前、数据未加载，没有 el 和 data
created：在实例创建、数据加载后，虚拟Dom渲染前 ，有 data，没有el
beforeMount：在组件内容被渲染到页面之前执行，有data，没有el
mounted：组件内容被渲染到页面之后，有data，有el
beforeUpdate：数据变化时执行
updated：数据变化后执行
beforeDeatroy：组件销毁前
destroyed组件销毁后

二、加入keep-alive会多哪几个生命周期

activated、deactivated

三、第一次进入组件会执行哪些生命周期

beforeCreate、created、beforeMount、mounted

四、加入keep-alive，第一次进入组件会执行哪些生命周期，第二次和第N次会执行哪些生命周期？

第一次：beforeCreate、created、beforeMount、mounted、activated
第二次或N次：activated

五、父组件中引入子组件，生命周期如何执行？

父组件：beforeCreate、created、beforeMount
子组件1：beforeCreate、created、beforeMount、mounted
子组件：beforeCreate、created、beforeMount、mounted
…
父组件：mounted

六、发送请求是在created还是在mounted中？

这个问题具体要看项目和业务得情况来确定：组件得加载顺序是：如果父组件中引入子组件，先加载父组件前三个，再加载子组件前四个，最后加载父组件的mounted，

1. 如果业务需求是：父组件引入子组件并且优先加载子组件的数据，那么父组件中当前请求要放在mounted中
2. 组件之间没有依赖关系，放在哪个created和mounted中都可以

七、如何在created中如何获取dom？

created的时候，dom还没有渲染完成，是直接获取不到的
要获取的方法有：

1. 在异步中获取：axios、定时器
2. 使用vue系统内置的 this.$nextTick

八、为什么发送请求不在beforeCreate中，beforeCreate和created有什么区别？

如果是直接进行发送请求，是可以拿到的，因为请求是异步的
但是，如果请求在methods中封装好，在beforeCreate中进行调用，此时拿不到methods中的方法，会报错。
区别：

1. beforeCreate阶段没有$data，created阶段有 $data
2. beforeCreate阶段拿不到methods中的方法，created阶段可以拿到

九、keep-alive的理解

1. keep-alive是缓存当前组件，用于当点击同一页面时，能够保存数据，不去重复发送请求

2. 可以设置的 props 属性：

   1. includes：字符串或正则表达式。只有名称匹配的组件会被缓存
   2. exclude：字符串或正则表达式。任何名称匹配的组件都不会被缓存
   3. max：数字。最多可以缓存多少组件

3. 基本用法：

<keep-alive>
	<component :is="views"></component>
</keep-alive> 

4. 使用 includes 和 exclude ：

// 1.includes 的用法：
<keep-alive include="a1,a2">
	<component :is="views"></component>
</keep-alive>
// 2.exclude 的用法
<keep-alive exclude ="/a1|a2/">
	<component :is="views"></component>
</keep-alive>

5. 首先匹配组件自身的 name 选项，如果 name 选项不可用，则匹配局部注册名称(父组件 components 选项的键值)，匿名组件不能被匹配

6. 使用场景：

   在某些场景下，不需要让页面重新加载时可以使用keep-alive
   如：首页–>列表页–>详情页–>再返回列表页，这时候 列表页需要keep-alive

结合router，缓存部分页面：
7. 在路由中设置router的元信息meta

export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {