vue面试题十三：一 Vue 子组件和父组件执行顺序、 二 created 和 mounted 的区别、 三 keep-alive 中的生命周期哪些、 四 Vue 中 key 的作用

一 Vue 子组件和父组件执行顺序

加载渲染过程：
1.父组件 beforeCreate
2.父组件 created
3.父组件 beforeMount
4.子组件 beforeCreate
5.子组件 created
6.子组件 beforeMount
7.子组件 mounted
8.父组件 mounted



更新过程：
1.父组件 beforeUpdate
2.子组件 beforeUpdate
3.子组件 updated
4.父组件 updated



销毁过程：
1.父组件 beforeDestroy
2.子组件 beforeDestroy
3.子组件 destroyed
4.父组件 destoryed

二 created 和 mounted 的区别

created:在模板渲染成 html 前调用，即通常初始化某些属性值，然
后再渲染成视图。
mounted:在模板渲染成 html 后调用，通常是初始化页面完成后，再
对 html 的 dom 节点进行一些需要的操作。

一般在created中请求异步数据

三 keep-alive 中的生命周期哪些

keep-alive 是 Vue 提供的一个内置组件，用来对组件进行缓存——
在组件切换过程中将状态保留在内存中，防止重复渲染

如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：
deactivated、activated。同时，beforeDestroy 和 destroyed 就
不会再被触发了，因为组件不会被真正销毁。
当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；
当组件被切回来时，再去缓存里找这个组件、触发 activated 钩子
函数

常见的keep-alive的使用方式：

// 第一步：在router.js中使用meta属性，声明一下是否需要缓存
 const routes = [
  {
    path:'/',
    component:Home,
    meta:{
        keepalive:true
    }
  },
  {
    path:'/login',
    component:Login
  },
   {
      path:'/edit',
      component:Edit,
      meta:{
          istoken: true
      }
   },
  {
      path:'/home',
      component:Home,
      meta:{
          keepalive:true
      }
  }
]

<!--第二步：-->

<div id="app">
    <!--keep-alive 表示页面不会被销毁，即保持页面状态-->
    <keep-alive>
      <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>
    
    <router-view v-if="!$route.meta.keepalive"></router-view>
</div>

四 Vue 中 key 的作用

vue 中 key 值的作用可以分为两种情况来考虑：

第一种情况是 `v-if` 中使用 key。由于 Vue 会尽可能高效地渲染元
素，通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来
实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个
元素就会被复用。如果是相同的 input 元素，那么切换前后用户的
输入不会被清除掉，这样是不符合需求的。`因此可以通过使用 key 来
唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。
这个时候 key 的作用是用来标识一个独立的元素。`


第二种情况是 `v-for` 中使用 key。用 `v-for` 更新已渲染过的元素列
表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改
变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此
处的每个元素。因此通过为每个列表项提供一个 key 值，来以便 Vue
跟踪元素的身份，从而高效的实现复用。`这个时候 key 的作用是为
了高效的更新渲染虚拟 DOM。`