1.关于生命周期
1.1 生命周期有哪些？
vue2官网系统自带的有8个：(如果用到了keep-alive组件，则会多加2个；后续会讲到这部分)
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例被创建之前 |
| created | 组件实例已经完全创建 |
| beforeMount | 组件挂载之前 |
| mounted | 组件挂载到实例上之后 |
| beforeUpdate | 组件数据发生变化，更新之前 |
| updated | 组件数据发生变化，更新之后 |
| beforeDestroy | 组件实例销毁之前 |
| destroyed | 组件实例销毁之后 |
当我看到mounted的描述时感觉疑惑，在created相关的生命周期的描述中有讲到“组件实例”，而mounted的描述中又说“组件挂载到实例上之后”，这里的表述很容易产生歧义，所以我决定搞清楚它们。
1.1.1 生命周期中，created和mounted中所指的“实例”的区别
首先看到created的描述“组件实例”，指的是“组件的实例”。天马行空起来，我们可以做以下比方：
组件：一个房子的蓝图/图纸；(通常是一个.vue文件）本身并不是一个可以直接运行的东西。它只是定义了一套规则，描述了:
template: HTML结构应该长什么样。data: 需要管理哪些数据。methods: 有哪些可以执行的方法。props: 可以从父组件接收哪些参数。lifecycle hooks: 在生命周期的各个阶段应该做什么。
实例(组件实例)：根据“组件”这张图纸建造的房子；“实例”是面向对象编程中的一个核心概念。当你根据一份“蓝图”（类或构造函数）创建一个具体的、可用的、占用内存的实际对象时，这个对象就是该蓝图的一个“实例”。
- 每个实例都有自己的数据副本。如果你创建了三个按钮实例，改变其中一个按钮的文字，不会影响另外两个。
- 每个实例都有自己的生命周期，会独立地经历创建、挂载、更新、销毁等阶段。
以上描述的就是created中所说的组件实例。
那么在这个基础上继续打比方：
实例(mounted中提到的实例)：是一块土地(房子需要在土地上盖)；这里的“实例”指的是 “一个DOM元素实例” ，通俗讲就是一个真实的DOM节点。所以，mounted 的描述更准确的解读是：
“（组件的模板）已经被挂载到（指定的）DOM元素上之后”
或者更通俗地说：
“组件输出的HTML结构已经真实地插入到页面中之后”
因此,在created中，我们可以安全地访问 data、methods 等了。（但真实的DOM还未生成，$el 还不可用）。而在mounted中，我们可以安全地操作DOM（因为真实DOM已经存在）、this.$el 访问组件的根DOM元素，进行需要依赖DOM的操作，例如初始化图表库（ECharts）、使用第三方JS库（如操作DOM的插件）等。
小提一点：beforeDestroy 是我们进行资源清理以防内存泄漏的最后机会窗口，务必在此阶段移除定时器、事件监听和取消异步请求。destroyed 通常用于最终记录，很少进行实际操作。
1.2 一旦进入组件会执行哪些生命周期？
创建前：beforeCreate
创建后：created
挂载前：beforemount
挂载后：mounted
1.3 父组件引入子组件，那么生命周期执行顺序是？
先执行 父组件的：beforeCreate、created、beforemount
再执行 子组件的：beforeCreate、created、beforemount、mounted (如果有多个子组件，则会按顺序执行各自的4个生命周期)
最后执行 父组件的：mounted
1.4 在created中如何获取dom
由于事件循环机制，通常会先执行同步任务再执行异步任务，因此
- 只要是在异步中获取获取dom的，就可以了。 (例如：setTimeout、请求、Promise.xxx()等等
- 使用vue系统内置的this.$nextTick
1.5 发送请求在created还是mounted？
这个要根据我们自己项目的具体情况来判断，根据我们第1.3点的知识可以知道，子组件的生命周期会在父组件的mounted之前执行，那么如果我们项目当前这个页面中的 子组件 的内容需要优先加载和展示，那么我们父组件就应该尽量把请求放到mounted中(这样就不会出现类似阻塞的情况)。
1.6 加入keep-alive会执行哪些生命周期？
没了解过keep-alive的可以先看第2.6点学习下，看完记得回来哟。
如果使用了keep-alive组件，当前的组件会额外增加2个生命周期：
activated
deactivated
如果当前组件使用了keep-alive组件，首次进入当前组件时会执行5个生命周期：
创建前：beforeCreate
创建后：created
挂载前：beforemount
挂载后：mounted
被激活：activated
紧接着看第1.7点
1.7 第二次或第N次进入组件会执行哪些生命周期？
如果当前组件加入了keep-alive，只会执行一个生命周期
被激活：activated
如果当前组件没有加入keep-alive
创建前：beforeCreate
创建后：created
挂载前：beforemount
挂载后：mounted
2.关于组件(主要会放在下一篇文章，这里先把keep-alive补出来)
2.1 组件传值(通信)的方式
2.2 父组件直接修改子组件的值
2.3 子组件直接修改父组件的值
2.4 如何找到父组件
2.5 如何找到根组件
2.6 keep-alive
keep-alive是用来缓存当前组件的！它的核心价值在于提升用户体验和性能。常用于Tab页的切换，下面写一个例子：
// App.vue
<template>
<div id="app">
<nav>
<!-- 点击跳转到不同用户的主页 -->
<router-link to="/user_home?user_id=1">用户1</router-link>
<router-link to="/user_home?user_id=2">用户2</router-link>
</nav>
<keep-alive>
<!-- 被缓存的部分 -->
<router-view/>
</keep-alive>
</div>
</template>
那么当我们第一次点击“用户1”的时候，跳转到“/user_home?user_id=1”路径时会正常执行生命周期来发送请求、渲染页面等。（会额外增加2个生命周期activated和deactivated，进入时只会额外执行activated）；
当我们处于“用户1”中的时候，点击“用户2”跳转到“/user_home?user_id=2”时，原本的组件会执行deactivated，仅仅只是“失活”而不是被“销毁”。
因此，后续我们再点击“用户1”的时候就会发现“/user_home?user_id=1”路径的内容已经被缓存了，不会再执行前四个生命周期 而只会执行activated再次被激活。
2.7 slot
2.8 如何封装组件
太晚了先记着，明天继续，加油特种兵。
我是跟着这位老师复习的，我这里会根据我自己的相关情况补充知识点和总结知识点。 www.bilibili.com/video/BV1ef…
